Bits and Pieces
6 min read Jan 21, 2022Hustling around to simply export a webpage to a PDF file or do you just want to export something from your webpage to PDF and want a simple solution?
You might get your answer here.
There are two approaches to exporting a webpage to PDF:
The server-side PDF approach is quite expensive and complex. The easier solution involves exporting a webpage on the client side.
First, let’s understand the benefits here
Client-side PDF generation is all about browsers’ API calls, which JavaScript and its related libraries consume to get things done. There are many JavaScript libraries we could use here, including:
Above is the image of a static webpage we are going to use for our tutorial. Let me sketch around this image and see the edited one below.
As you see above, we are going to export this grey bordered box out of the complete page. we have a header as extra on this page, you might have other things as well on your webpage which you don’t bother about, to get exported. All our focus is on the grey-bordered rectangle.
The content of this box mainly is three things- an Image, a text graph, and a table. how to draw this webpage anyway in the first place? well, check the index.html file code below, the main file we have.
Let’s understand this index.html code.
The image above is explaining things itself, I will explain the html2pdf() function call and opt variable.
The opt variable holds all the values which are defining the configuration of a pdf file. Margin, of course, the page margin we need on each PDF page, the filename is the name of the exported PDF file. The image is an important parameter of the opt object.
The html2pdf library uses the html2canvas library to paint an image on the webpage as a screenshot on the pdf page. It’s important to note here you can export only “jpeg”, “png” and “webp”(chrome) images, check here.
The html2canvas object is passed with scale parameter, which generates PDF based on browsers device pixel ratio. Check the parameters here we can pass in this object.
The jsPDF object, here we are passing dimensions of the PDF page, the format of the page, precision, and the measurement units, like in “mm”, “in” or “px”. This object will be passed to the jsPDF library to set up the pdf page. check the complete list of parameters here.
A final call to the html2pdf() function. Here, we have to call multiple worker API library functions) to achieve our goal. The flow basically goes like this:
.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()
We have to call all the functions in this order. If you want a page setting of a pdf, call the set() function on a from() function and pass the opt object and at last we have to call save() function to save our pdf file.
In our generatePDF() function line 102 can be simply html2pdf().from(element).save() , then it will set all the page settings to default for pdf, default layout is portrait scaling is one, margin is 1 and element will be left aligned.
I hope you have found this useful. Let me know in the comments, and feel free to ask questions!
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want: