How to use JS to convert HTML pages or forms into PDF documents

English | https://medium.com/coding-beauty/javascript-convert-html-to-pdf-99851d36e1cd

Using the jspdf library, we can easily convert any HTML page or form to PDF:

For example:

import { jsPDF } from 'jspdf';


const pdfContentEl = document.getElementById('pdf-content');


const doc = new jsPDF();


await doc.html(pdfContentEl.innerHTML).save('test.pdf');

PDF is a popular file format that we use to present and share documents with a fixed layout across different platforms and devices.

To start the conversion, we use the constructor to create a new jsPDF object. We then call the html() method, passing the element that contains the content we want in the PDF. On the result, we call save(), passing the name of the output PDF file we want.

Suppose we have HTML like this:

<div id="pdf-content">
  <h1>Test</h1>
  <p>Here's what we're saving to PDF</p>
</div>
<button id="save-pdf">Save PDF</button>

On the webpage there is this output:

When we click the "Save PDF" button, jsPDF will create a new PDF from the HTML elements and download it to the browser as a file.

Here's what was displayed when we opened the PDF:

Install jsPDF

To start using the jsPDF library, we can install it from NPM with the following command:

npm i jspdf

Once installed, we can import it into a JavaScript file like this:

import { jsPDF } from 'jspdf';

To make this file work in HTML, we can use a module bundler like Parcel, which is what I use.

Using Parcel, we can include scripts in HTML like this:

<script type="module" src="index.js"></script>

We can use modern tools like TypeScript and ES module imports in our scripts, and thanks to Parcel, it just works.

After installing Parcel with npm install parcel , we run the HTML with npx parcel my-file.html .

npm install parcel


npx parcel my-file.html

Parcel makes HTML available at localhost:1234, as you might have seen in the demo above.

Customize HTML to PDF conversion

The jsPDF constructor accepts an options object to customize the PDF conversion process.

For example, the Orientation option sets the orientation of the generated PDF.

By default it is portrait, but we can set it to landscape.

Customize PDF Orientation

const doc = new jsPDF({ orientation: 'landscape' });

Customize PDF units and dimensions

Using the Units and Formatting options, we can set the units and dimensions of each PDF page in the output file.

const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });

Here we specify a landscape export of 2 x 4 inches.

Convert HTML forms to PDF

jsPDF can also handle HTML elements whose appearance can change dynamically based on user interaction, such as form inputs.

HTML:

<form id="form">
  <input type="email" name="email" id="email" placeholder="Email" />
  <br />
  <input
    type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  <br /><br />
  <button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>

JavaScript:

import { jsPDF } from 'jspdf';


const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
  await doc.html(formEl).save('test.pdf');
});

In the web page, we put some test values ​​in the two form inputs to see if they show up in the PDF output.

PDF:

However, we cannot interact with form inputs or buttons in the PDF file.

Summarize

The jsPDF library provides a convenient way to convert HTML content (including forms) to PDF format. 

The whole process is very simple, we can create a new jsPDF object, call the html() method to specify the content, and then use the save() method to generate the output file. 

In addition, we can customize the PDF output with options such as orientation, units, and format. 

Overall, using jsPDF simplifies the process of creating PDF files from HTML content in our web applications.

Finally, thank you for reading.