HTML to PDF JavaScript with PDFreactor

How to convert HTML to PDF from JavaScript & HTML containing JavaScript to PDF

About this article

There are two ways where JavaScript can be involved in the HTML to PDF generation: Converting HTML and JavaScript to PDF or converting HTML from JavaScript to PDF. This article will provide answers to the following questions:

  • How to convert HTML with JavaScript to PDF?
  • How to convert HTML to PDF from JavaScript?
  • Can I convert a HTML page to PDF with JavaScript?

Convert HTML to PDF using JavaScript

JS Frameworks supported when converting HTML to PDF

PDFreactor supports a number of popular JavaScript frameworks and libraries, including:

  • amCharts
  • Angular.js
  • Flotr2
  • Handlebars
  • HighCharts
  • jQuery
  • Less.js
  • MathJax
  • MooTools
  • Prototype
  • RequireJS
  • SystemJS
  • Underscore

Many other frameworks work with PDFreactor as well, even if they are not listed here. Should a particular JavaScript framework or library not work as expected, you could use powerful JavaScript debugging tools that PDFreactor offers. More information about those can be found in the PDFreactor Web Service or PDFreactor Library manual.

Proprietary JavaScript

PDFreactor’s JavaScript engine also includes several proprietary extensions which introduces features that are relevant to paged media output especially if you are converting JavaScript based HTML to PDF. Browsers usually only focus on continuous output. One of the most important of such features are the Description objects. These objects describe a rectangle which represents layout positions and dimensions of a given document object. Description objects are explored in detail in the PDFreactor Web Service or PDFreactor Library manual.

There are various types of converted objects, such as converted, BoxDescription and LineDescription representing a single page, box or line, respectively. With these objects, you can access layout information during runtime. Using that information, it is possible to manipulate the document’s layout via JavaScript to create the final PDF. You can implement even complex logic to achieve use cases or requirements that would usually require dedicated design and publishing software.

Common use cases that can be enhanced when converting HTML to PDF using JavaScript are e.g. catalogs, flyers and books where there is sometimes the requirement to reduce blank space on a page. Using JavaScript, this space can be detected and then filled using external contents.

Converting HTML templates

Since PDFreactor’s JavaScript engine functions similar to those of web browsers, you can also convert HTML to PDF with JavaScript using your templates by feeding them data in e.g. JSON format. Our Invoice sample shows how to convert an Angular HTML template to PDF. It consists of an Angular.js template and reads data from a JSON file to create a complete document from the template which in turn is then converted to PDF.

Try PDFreactor

Convert HTML to PDF from JavaScript

Generate PDF from HTML using the JavaScript API

First, you have to pass the HTML you would like to convert to PDFreactor. This can be done in two ways: Either pass the URL of the site (which means that the PDFreactor Web Service must have access to the URL) or capture the HTML you want to convert via JavaScript and pass it to PDFreactor as a string (this makes handling of relatively linked resources more complex). Both options have advantages and disadvantages and you should choose whichever integrates best with your environment or use case.

Download the PDF

PDFreactor returns the generated PDF or image as a Blob. You can then process it further and e.g. use JavaScript to export the data to a PDF file on a remote server. This however is only compatible with browsers that support Blobs. Alternatively, PDFreactor can also provide you with a link where you can download the PDF directly from the PDFreactor Web Service. This however only works if the conversion was performed asynchronously.

View the PDF

Instead of downloading you could also display the PDF. As mentioned above, the PDF is returned as a Blob. a Blob URL can be used as the source for e.g. an “iframe” or “object” element (or “img” if you converted to image instead of PDF). Should this not be supported, you can optionally retrieve the PDF as a base64-encoded binary and use it in a data URL as source for the afore mentioned elements.

Another possibility would be to convert asynchronously. After the conversion is finished, you can download it from a URL. This URL could also be used as source for the aforementioned “iframe” or “object” elements.

Use JavaScript to Print the PDF

PDFs generated with PDFreactor can optionally trigger the print dialog prompt when opened. However, this does not work in every PDF viewer. We recommend browser technologies, such as JavaScript “window.print()” to print the generated PDF directly. So as you can see, with the PDFreactor JavaScript API you can directly print a page of your website to PDF very easily.

Use Node.js for server-side JavaScript HTML to PDF conversion

PDFreactor also provides a Node.js API client to trigger the HTML to PDF conversion from an existing Node.js web application. Contrary to the client-side JavaScript approach, you can use all of the extended Node.js APIs like e.g. the file system API, to directly write the PDF generated with the PDFreactor Node client to the file system.

See the use cases