CSS in generated PDFs

Hi,

I have been researching how to add CSS styles via HTML links into my Aspose.Pdf.Document. Most of the cases/links I have found have referenced older versions of the Aspose.Pdf API. Injecting a into an HTML fragment within the document with an absolute URL does not seem to work. Do I have to inject the styles directly into my HTML?

Thanks!

@Chris.Thomas,
Aspose.Pdf API has support of converting HTML document with inline, internal and external styles to PDF format. In order to include the external resources, you need to define the path of external resources in the constructor parameter of HtmlLoadOptions class. Please refer to this help topic: Convert HTML to PDF Format. If this does not help, then kindly send us a Zip of your source HTML document. We will investigate and share our findings with you.

I have realized that the problem isn’t with all CSS files; just ones that have @import declarations in them. Can you confirm that this is an issue?

@Chris.Thomas,
We have tested an HTML document with CSS import declaration and it works fine in our environment as follows:

[C#]

string dataDir = @"C:\Pdf\test401\";
HtmlLoadOptions opts = new HtmlLoadOptions(dataDir);
Document document = new Document(dataDir + "input.html", opts);
document.Save(dataDir + "output.pdf");

These are the input and output files: Files.zip (40.5 KB)

Hi Imran,

Thanks for the example. I was talking about import declarations within CSS files. Can you give me an example of a CSS file that references another CSS file?

Thanks!

@Chris.Thomas,

It also works in that way. We have referenced MyCSS2.css (import reference of myCSS.css) file into the HTML document. These are the input and output files: Files_17.10.zip (40.6 KB). If this does not help, then kindly send us the complete details of your scenario, including source HTML, code and CSS files. We will investigate and share our findings with you.

I am adding a link to my CSS file in HTML as follows:

<link rel="stylesheet" type="text/css" href="http://hostname/path/Styles/print.css" />

The stylesheet “print.css” has the following imports:

@import "Default/default_print.css";
@import "Custom/custom_print.css";

These files are located at http://hostname/path/Styles/Default/default_print.css and http://hostname/path/Styles/Custom/custom_print.css respectively.

The following code instantiates my document object:

var document = new Document(HtmlStream, new HtmlLoadOptions("http://hostname/path/Styles"));

I then take the pages from this document and put them into a larger document:

foreach (Page page in document.Pages) {
    Document.Pages.Add(page);
}

Is stitching the pages into a larger Aspose.Pdf.Document where I’m going wrong? I have tried creating this master document with the following code:

using (var stream = new MemoryStream())
    Document = new Document(stream, new HtmlLoadOptions("http://hostname/path/Styles"));

as well as:

Document = new Document();

@Chris.Thomas,

Kindly share all CSS files, HTML document, PDF document and the complete code. We recommend our clients to share all details in the form of a use case, so that we could replicate the same problem in our environment.

I use a stream from a web control instead of an HTML document:

            HtmlStream = new MemoryStream();
            Writer = new HtmlTextWriter(new StreamWriter(HtmlStream));
            // Initialized with <span></span>. We don't want that.
            Writer.Flush();
            HtmlStream.SetLength(0);

            control.RenderControl(Writer);
            Writer.Flush();

            // Write HTML block to document.
            HtmlStream.Position = 0;
            var document = new Document(HtmlStream, new HtmlLoadOptions("http://dev2016/Ellucian.ERecruiting.Web.External/Styles"));

            return document;

The WebControl contains a link to the CSS file. I have uploaded some example HTML, and the entirety of the print.css file is my previous post. Here it is again:

@import "Default/default_print.css";
@import "Custom/custom_print.css";

I can’t give you all of my codebase because it’s multiple gigabytes, but I believe I have shared all relevant code with you.

@Chris.Thomas,

We have tried the same way to convert the HTML document to PDF and CSS is applied in the output PDF.
Input HTML URL: http://localhost/input.html
This style-sheet has an import of another CSS (myCSS.css): http://localhost/path/styles/myCSS2.css
Custom CSS: http://localhost/path/styles/custom/myCSS.css

[C#]

    // Create a request for the URL.
    System.Net.WebRequest request = System.Net.WebRequest.Create("http://localhost/input.html");
    // Get the response.
    HttpWebResponse response = (HttpWebResponse)request.GetResponse();

    // Get the stream containing content returned by the server.
    Stream dataStream = response.GetResponseStream();
    // Open the stream using a StreamReader for easy access.
    StreamReader reader = new StreamReader(dataStream);
    // Read the content.
    string responseFromServer = reader.ReadToEnd();
    reader.Close();
    dataStream.Close();
    response.Close();

    MemoryStream stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(responseFromServer));
    HtmlLoadOptions options = new HtmlLoadOptions("http://localhost/path/styles/");
    // Load HTML file
    Document pdfDocument = new Document(stream, options);
    // Save resultant file
    pdfDocument.Save(@"C:\Pdf\test401\HTMLToPDF_out.pdf");

This is the output PDF: HTMLToPDF_out.pdf (43.2 KB)
This is the Zip of HTML and CSS files: HTML and CSS Files.zip (543 Bytes)

@imran.rafique,
I got this to work. My load options parameter was missing a trailing “/” character. Thanks for the help

@Chris.Thomas,

It is nice to hear from you that the problem has been resolved. Please feel free to let us know whenever you require any further assistance.