Using CSS Stylesheet when processing HTML

September 22, 2023 · 3 min read

Developer Evangelist

One question we get asked here at DynamicPDF is how to use a CSS stylesheet when using the html input with the pdf endpoint to convert HTML to PDF. Here is a simple way to accomplish this task.

Using the html input type with the pdf endpoint is straightforward.

You can also use HTML with a linked CSS stylesheet if the stylesheet is publicly available via HTTP. For example, the following instructions JSON specifies a simple HTML string that references an external stylesheet using the basePath JSON element.

{
  "inputs": [
    {
      "type": "html",
      "basePath": "http://www.dynamicpdf.com",
      "htmlString": "<html><head><link rel="stylesheet" href="./mystyle.css"></head><body><p>Test</p></body></html>"
    }
  ]
}

Although an embedded CSS stylesheet must be accessible via HTTP - like in the previous example - an easy workaround for a CSS only available locally is to replace the <link> tag content with the stylesheet's content. The following example illustrates.

tempHtml = File.ReadAllText(basePath + "example.html");
tempCss = File.ReadAllText(basePath + "example.css");
	
StringBuilder sb = new StringBuilder();
sb.Append(tempHtml.Substring(0, tempHtml.IndexOf("<link")));
sb.Append("<style>" + tempCss + "</style>");

tempHtml = tempHtml.Substring(tempHtml.IndexOf("<link"));
sb.Append(tempHtml.Substring(tempHtml.IndexOf("/>") + 2));

HtmlResource resource = new HtmlResource(sb.ToString());
pdf.AddHtml(resource, null, PageSize.Letter, PageOrientation.Portrait, 1F);

Source: PdfHtmlCssWorkAroundExample

tempHtml = Files.readString(Paths.get(basePath + "example.html"));
tempCss = Files.readString(Paths.get(basePath + "example.css"));

StringBuilder sb = new StringBuilder();
sb.append(tempHtml.substring(0, tempHtml.indexOf("<link")));
sb.append("<style>" + tempCss + "</style>");

tempHtml = tempHtml.substring(tempHtml.indexOf("<link"), tempHtml.length());
sb.append(tempHtml.substring(tempHtml.indexOf("/>") + 2));

HtmlResource resource = new HtmlResource(sb.toString());
pdf.AddHtml(resource, null, PageSize.LETTER, PageOrientation.PORTRAIT, 1F);

Source: PdfHtmlCssWorkAroundExample.java

var tempHtml = fs.readFileSync(basePath + "example.html", 'utf8');
var tempCss = fs.readFileSync(basePath + "example.css", 'utf-8');

var sb = tempHtml.substring(0, tempHtml.indexOf("<link"));
sb = sb + "<style>" + tempCss + "</style>";
tempHtml = tempHtml.substring(tempHtml.indexOf("<link"));
sb = sb + tempHtml.substring(tempHtml.indexOf("/>") + 2);

var resource = new HtmlResource(sb);
pdf.addHtml(resource, null, PageSize.LETTER, Orientation.PORTRAIT,1);

Source: PdfHtmlCssWorkAroundExample.js

$tempHtml = file_get_contents(PdfHtmlCssWorkAroundExample::$BasePath . "example.html");
$tempCss = file_get_contents(PdfHtmlCssWorkAroundExample::$BasePath . "example.css");
$sb = substr($tempHtml, 0, strpos($tempHtml,"<link"));
$sb = $sb . "<style>" . $tempCss . "</style>";
$tempHtml = substr($tempHtml, strpos($tempHtml, "<link"));
$sb = $sb . substr($tempHtml, strpos($tempHtml, "/>") + 2);
$resource = new HtmlResource($sb);
$pdf->AddHtml($resource, null, "Letter", "Portrait", 1);

Source: PdfHtmlCssWorkAroundExample.php

TBD

from dynamicpdf_api.pdf import Pdf
from dynamicpdf_api.html_resource import HtmlResource
from dynamicpdf_api.page_size import PageSize
from dynamicpdf_api.page_orientation import PageOrientation
from Shared import *

def html_css_work_around(api_key, full_path, output_path):

    pdf = Pdf()
    pdf.api_key = api_key
    
    with open(full_path + "example.html","r") as f:
        tempHtml = f.read()
        f.close()
    with open(full_path + "/example.css","r") as g:
        tempCss = g.read()
        g.close()
    
    sb1 = tempHtml[0:tempHtml.index("<link"):1];
    sb2 = tempHtml[tempHtml.index("/>") + 2::];
    sb = sb1 + "<style>" + tempCss + "</style>" + sb2;
    print(sb);
    resource = HtmlResource(sb);
    pdf.add_html(resource, None, PageSize.Letter, PageOrientation.Portrait,1);

    response = pdf.process()

    if response.is_successful:
        with open(output_path + "workaround-output.pdf", "wb") as output_file:
            output_file.write(response.content)
    else:
        print(response.error_json)

if __name__ == "__main__":
    html_css_work_around(api_key, users_guide_resource_path, output_path + "/users-guide-output/")

Source: PdfHtmlCssWorkAroundExample.py

Use simple string manipulation to replace/insert the relative link to the local CSS with the CSS file's content.