'HiQPdf not finding the css

The website I have written requires a convert web page to PDF functionality. After looking at the options HiQPdf looked like the best option and did all that was needed, currently I am using the free version until testing has finished.

So following the instructions, I create the web page and pass it onto the PDF creator along with a location to find all the linked items (css mainly). The code goes

var model = new SomeKindOfModel
{
    SetSomeStuff = stuff
};

string htmlToConvert = RenderRazorViews.RenderViewAsString(ControllerContext, "Print", model);
string baseUri = $"{Request.Url.Scheme}://{Request.Url.Authority}";

HtmlToPdf htmlToPdfConverter = new HtmlToPdf();
byte[] pdfBuffer = htmlToPdfConverter.ConvertHtmlToMemory(htmlToConvert, baseUri);

return new FileContentResult(pdfBuffer, "application/pdf");

Pretty standard code.

Now when I run this from Visual Studio, it works as I would expect, the resulting pdf looks right, everything is in the correct place. When I publish to file system on my computer it works fine. When I copy the above files to another laptop and access that via it's ipAddress it works fine.

The problem occurs when I use a web deploy package to put it on the main test server. At this point the pdf is created and the text is there but there is no styling, everything is just black on white text. If I include some of the styling in the cshtml file then that is picked up. Everything else on the site works correctly. I have added the local site.css to the bootstrap bundle and neither of them are being picked up

I think the string baseUri line is not pointing the pdf creator to the correct location, but I have looked at what is in the variable and tried lots of different variations and nothing is working.

I have looked at the text in the htmlToConvert and it looks right the links seem to be pointing in the correct direction.

Even adding a link tag to the page with the location of the css hard coded into it isn't picking up the css.

Is there some subtly regarding publishing a web site that I am missing here? Despite many years of developing ASP.NET MVC applications, it's the first time I have actually had to publish a web site, at my previous companies it was always someone else's problem. Here, it's mine.

c++sharpasp.nethiqpdf


Solution 1:[1]

OK, after much testing the problem occurs with every PDF generator I try. Testing anywhere else but looking at the css files on the server works, but testing on the server causes the problem.

I solved it by including the styles in the cshtml file and changing things enough so that it looks right. Its a solution I hate, but it works.

Solution 2:[2]

Have you set a Base Url like var pdf = htmlToPdfConverter.ConvertHtmlToPdfDocument(html, "http://www.example.com/css/");

Also see this answer: Html to pdf with images using hiqpdf

Solution 3:[3]

@Andrew I had the exact same problem!

My code using free version of HiQPdf was working perfectly on my local machine to convert a View to PDF, but upon release to server environments (Azure-hosted in my case), CSS files and images were not being picked up at all.

Like you, I had tried various things, like hard-coded absolute URLs instead of relative (did not work), and including the styles in the .cshtml file header (which of course is a highly undesirable solution).

The solution may be too late for you, but it turns out you can include @Server.MapPath() in your .cshtml files to resolve your relative URLs for PDFs.

So

[email protected]("~/Content/css/site.css")

instead of

href="~/Content/css/site.css" />

Below is a complete block:

<head>
    <title>Summary</title>
    
    <link rel="stylesheet" [email protected]("~/Content/css/bootstrap_v5.css") />

    <link rel="stylesheet" [email protected]("~/Content/css/site.css") />
</head>

MapPath was also needed to resolve images (I assume for JavaScript files too although there was none needed for my solution)

<body>
    <div id="ProjectSummary">
        <div id="Header">
                <img id="Logo" [email protected]("~/Content/images/LogoTransparent.png") alt="Logo">
        </div>

Your local instance will still display styling/images as expected, but including @Server.MapPath() should enable it to work in subsequent environments.

Hope this helps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrew
Solution 2
Solution 3 David

Related Questions