Unable to implement CSS styles on the provided HTML code

Question

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods from the EvoPdf API:

 1. GetPdfBytesFromHtmlStream(Stream, Encoding,urlbase)

 2. SavePdfFromHtmlStringToFile(String html,string filename,urlbase)

The HTML chunk I am sending looks something like this:

 <ol class = "lol">
         <li> HEY </li>
         <li> Now </li>

  </ol>

The CSS in the external file is defined as:

 .lol {

      background-color: red;

  }

According to the documentation, the third argument should be the full URL of the original HTML where you extracted the chunk from. Since using localhost/3232 didn't work, I uploaded my app online. Despite this, I can't seem to get the CSS applied to the generated HTML. The documentation also suggests adding:

       <HEAD> <BASE HREF="full url to your html file"> </HEAD>

And then utilizing this method:

        pdfConverter.GetPdfBytesFromHtmlString(String html);

However, none of the above attempts have successfully applied CSS. Any ideas on how to fix this issue?

c#html asp.net css evopdf

Answer 1

Answer №1

In my experience with evoPDF, I have found that it is best to avoid having the html in an external file and instead inline the styles in the head of the document. When setting up the PDF generator for Careers 2.0, we discovered that live urls behind a web server were necessary, rather than just relative links in the same directory structure. It's important to note that there is a timeout in evo pdf that can result in loss of images if loading takes too long, so it's beneficial to inline everything.

It is also advisable to pass fully valid HTML, rather than just snippets needed to generate the view. Our version of evoPDF essentially hoists a browser instance and captures a screenshot, rendering differently depending on the doctype used.

Answer 2

In my experience with evoPDF, I have found that it is best to avoid having the html in an external file and instead inline the styles in the head of the document. When setting up the PDF generator for Careers 2.0, we discovered that live urls behind a web server were necessary, rather than just relative links in the same directory structure. It's important to note that there is a timeout in evo pdf that can result in loss of images if loading takes too long, so it's beneficial to inline everything.

It is also advisable to pass fully valid HTML, rather than just snippets needed to generate the view. Our version of evoPDF essentially hoists a browser instance and captures a screenshot, rendering differently depending on the doctype used.

Answer 3

Answer №2

While working with EvoPdf, I encountered an issue which was resolved by referencing the baseURL from web.config file. Instead of using HttpContext.Current.Request.Url.AbsoluteUri, I specified the baseURL in the appSettings section as shown below:

<appSettings>
    <add key="baseURL" value="http://your-domain.com/" />
</appSettings>

By setting the baseURL explicitly, the CSS rendering issue was fixed. This approach also works seamlessly with HTTPS. During testing, you can hard code the URL without relying on ConfigurationManager.

TextWriter outTextWriter = new StringWriter();

Server.Execute("Page1.aspx", outTextWriter);
Server.Execute("Page2.html", outTextWriter);

string htmlStringToConvert = outTextWriter.ToString();
outTextWriter.Close();

// Use the base URL specified in appSettings
string baseUrl = ConfigurationManager.AppSettings["baseURL"].ToString();

// Convert the HTML string to a PDF document in memory buffer
byte[] outPdfBuffer = htmlToPdfConverter.ConvertHtml(htmlStringToConvert, baseUrl);

Answer 4

While working with EvoPdf, I encountered an issue which was resolved by referencing the baseURL from web.config file. Instead of using HttpContext.Current.Request.Url.AbsoluteUri, I specified the baseURL in the appSettings section as shown below:

<appSettings>
    <add key="baseURL" value="http://your-domain.com/" />
</appSettings>

By setting the baseURL explicitly, the CSS rendering issue was fixed. This approach also works seamlessly with HTTPS. During testing, you can hard code the URL without relying on ConfigurationManager.

TextWriter outTextWriter = new StringWriter();

Server.Execute("Page1.aspx", outTextWriter);
Server.Execute("Page2.html", outTextWriter);

string htmlStringToConvert = outTextWriter.ToString();
outTextWriter.Close();

// Use the base URL specified in appSettings
string baseUrl = ConfigurationManager.AppSettings["baseURL"].ToString();

// Convert the HTML string to a PDF document in memory buffer
byte[] outPdfBuffer = htmlToPdfConverter.ConvertHtml(htmlStringToConvert, baseUrl);

Unable to implement CSS styles on the provided HTML code

Answer №1

Answer №2

Similar questions

Switching up the size of individual components in the Bootstrap grid system: The ultimate guide

Extracting unique text values from nested div elements within list items using Selenium with Python

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

Unable to delete the margin of Material-ui TextField

Implementing smooth transitions on iPad screens with responsive text

"Divs of the same type automatically adjust size to fit within the

Emphasize specific letters in a word by making them bold, according to the user

Permit the use of HTML tags within a CSS-only tooltip

"Enhance Your Design with Hovering CSS Backgrounds

Unable to implement Bootstrap 5 Hamburger Animation - Looking for solutions

Issues with displaying iframes on iOS devices, particularly iPhones

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

What is the best way to retrieve the identifier of the checkbox that was recently selected by the user with jQuery?

How to position an element to the right in Bootstrap 4 without causing it to move to a new line immediately?

SQL Server database is showing question marks instead of HTML symbols

Display a button within a table depending on the content of adjacent cells

The text box is intersecting with the photo

Constructing a horizontal slider using vertically floating divs

Struggling with implementing responsive mobile buttons that stack in a column? Here's the solution

What is the process of adding background color to text?