PDFreactor and JavaScript

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

The following 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?

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.

Convert HTML to PDF using JavaScript

PDFreactor can convert HTML documents that contain JavaScript. It features a powerful JavaScript engine that processes JavaScript similar to web browsers. By default, JavaScript processing is disabled and has to be enabled using the configuration property “javaScriptSettings”.

PDFreactor’s JavaScript engine is compatible with ES6 (EcmaScript 6) and also supports XMLHttpRequests (AJAX or XHR for short).

JavaScript Frameworks

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 manual.

Converting HTML templates

Since PDFreactor’s JavaScript engine functions similar to those of web browsers, you can also convert HTML templates to PDF while feeding them data in e.g. JSON format from JavaScript. Our Invoice sample 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.

Proprietary JavaScript

PDFreactor’s JavaScript engine also includes several proprietary extensions which introduces features that are relevant to paged media output, whereas 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 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 and 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 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.

Convert HTML to PDF from JavaScript

To generate a PDF from JavaScript e.g. on your website, use the PDFreactor Web Service. The web service offers a JavaScript library which can be used on a website. The library provides access to the PDFreactor API so you can start to generate PDFs or images.

A common use case for this is to have a “download PDF”, “export to PDF” or “print PDF” button on your website which triggers the appropriate logic by e.g. implementing an appropriate “onclick” event handler.

Generate the PDF

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 so that users can within JavaScript download the PDF file. 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.

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 “window.print()” to print the generated PDF directly.