We show lot of data in our web applications, it will be awesome if we quickly download specific part of PDF rather than printing it. It will be easy to share for different stakeholders and also for focused meetings. In web application development, download to PDF means, we need to develop backend api specifically and then link it in frontend which takes longer development cylce. Instead it would be really great, if there is way to download what we see in the user interface quickly with few lines of Javascript, similar to export options in word processing application. 

Generate PDF from Javascript using jsPDF

We show lot of data in our web applications, it will be awesome if we quickly download specific part of PDF rather than printing it. It will be easy to share for different stakeholders and also for focussed meetings. In web application development, download to PDF means, we need to develop backend api specifically and then link it in frontend which takes longer development cylce. Instead it would be really great, if there is way to download what we see in the user interface quickly with few lines of Javascript, similar to export options in word processing application.&nbsp;
<a href="https://parall.ax/products/jspdf" target="_blank" rel="noopener">jsPDF</a> is a library written in Javascript. It helps to convert frontend html content, image, charts or a tabular data to directly export to pdf. It also provides advanced support of adding watermark, embedding fonts, adding forms, encryption and password protection also. It is licensed under MIT. It has very good <a href="http://raw.githack.com/MrRio/jsPDF/master/docs/index.html" target="_blank" rel="noopener">documentation</a>.
Setup:
In this blog, we will see how jsPDF can be used with plain html, which will be webpacked to have the download option in the frontend page. Create a npm project by using npm init, then install jsPdf, html2canvas. Also supporting dependenceis like webpack, webpack-cli and html-webpack-plugin. In the JsPDF documentation, they have given ways for integrating jsPdf with Angular, Vue and React.
<pre class="language-shell"><code class="language-shell">npm install jsPdf --save 

npm install html2canvas</code></pre>
You can also load it via CDN
<pre class="language-javascript"><code class="language-javascript">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.0/jspdf.umd.min.js"&gt;&lt;/script&gt;</code></pre>
&nbsp;
Create PDF with text content
To load the jsPDF, use require jspdf and get the jsPDF class. Then create a instance of the object, will create a pdf object reference.&nbsp;
<pre class="language-javascript"><code class="language-javascript">const { jsPDF } = require("jspdf");
const doc = new jsPDF();</code></pre>
Now we can write the text using text() method. Pass the text with x and y co-ordinates to write the text into the pdf object. &nbsp;
<pre class="language-javascript"><code class="language-javascript">doc.text("jsPdf Tutorial - Sample PDF", 10, 10);</code></pre>
To save the PDF, pass the output file name as argument to save method.
<pre class="language-javascript"><code class="language-javascript">doc.save("sampletutorial.pdf");</code></pre>
Creating the pdf from the client, we can hook it, on click of the button or on click of the URL.&nbsp;
<pre><code>&lt;button id="downloadpdf"&gt;Download&lt;/button&gt;

function downloadContent() {
	const { jsPDF } = require("jspdf");
	doc.text("jsPdf Tutorial - Sample PDF", 10, 10);
	doc.save("sampletutorial.pdf");
}</code></pre>
&nbsp;
Add a link to the PDF content
Now lets add a text with hyperlink in the pdf object. It can be done with textWithLink() method which takes the text, origin and the url. So when click on the text it will redirect to the URL. We can change the color of the text by changing the text color of the pdf object to blue, so it appears as a hyperlink text.
<pre class="language-javascript"><code class="language-javascript">doc.setTextColor("0645AD");
doc.textWithLink("Hyper link text: FindBestOpenSource", 10, 25, {
 url: "https://www.findbestopensource.com/",
});</code></pre>
&nbsp;
HTML content to PDF
Generate the html content to PDF object can be done, by using html() method. Below is the HTML content element which has header, paragraph text and numbering list. It is done by html plugin which is seamlessly integrated with the jsPdf library, which works by just using the method.
<pre class="language-html"><code class="language-html">&lt;div id="content"&gt;
	&lt;h2&gt;H2 Header&lt;/h2&gt;
	&lt;p&gt;It is a paragraph text&lt;/p&gt;
	&lt;ul style="padding-left: 10px;"&gt;&lt;span&gt;Sample numbering list&lt;/span&gt;
		&lt;li&gt;First item&lt;/li&gt;
		&lt;li&gt;Second item&lt;/li&gt;
		&lt;li&gt;Third item&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div
</code></pre>
Now get the HTML DOM element and provide it to html() method. This will convert all the html element in the same way how it renders in browser and adds as a content to PDF instance. In the callback function, pdf document object comes as arugment which has the html content converted in it. Now we just need to save the content to PDF.
<pre class="language-javascript"><code class="language-javascript">let element = document.getElementById("content");
doc.html(element, {
 margin: 30,
 callback: function (doc) {
 doc.save("sampletutorial.pdf");
 }
});</code></pre>
Create Scatter Chart:
We can create the simple chart on the canvas element by plotting the context ellipse and fill with different x and y coordinates with plain javascript.&nbsp;
<pre class="language-javascript"><code class="language-javascript">function createChart() {
 const canvas = document.getElementById("myCanvas");
 canvas.style.background = "floralwhite";
 const ctx = canvas.getContext("2d");
 canvas.height = canvas.width;
 ctx.transform(1, 0, 0, -1, 0, canvas.height)

 const xArray = [50,60,70,80,90,100,110,120,130,140,150];
 const yArray = [7,8,8,9,9,9,10,11,14,14,15];

 ctx.fillStyle = "red";
 for (let i = 0; i &lt; xArray.length-1; i++) {
 let x = xArray[i]*400/150;
 let y = yArray[i]*400/15;
 ctx.beginPath();
 ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2);
 ctx.fill();
 }
}</code></pre>
Now get the canvas element, then directly do the doc.addImage(canvas) but background will have dark background. To get the floral white background of the chart, it is better to use html2canvas method which will convert the exact chart element with the background into a canvas html element, which can be added as image to the pdf object with expected format and co-ordinates.
<pre class="language-javascript"><code class="language-javascript">const canvas = document.getElementById("myCanvas");
const canvaselement = await html2canvas(canvas, {useCORS: true, allowTaint: true});
doc.addImage(canvaselement, 'png', 10, 130);</code></pre>
Insert Pages to the PDF:
Now if we want to put the content in a new page, it can be done using insertPage method with the page number.&nbsp;
<pre class="language-javascript"><code class="language-javascript">doc.insertPage(2);</code></pre>
This example has been made as webpack project, it will generate the assets in dist folder with index.html. If we open, it looks like the below html page. This project is available in the <a href="https://github.com/nagappan080810/jspdftutorial" target="_blank" rel="noopener">github</a>.&nbsp;
<img src="https://assets.blackslate.io/posts/01/l8VhW3huapjJwCK.jpeg" alt="" width="570" height="531">
By clicking, download PDF, it downloads the PDF content with html content and chart objects.&nbsp;
<img src="https://assets.blackslate.io/posts/01/pzYZtwEBfteLR7S.jpeg" alt="" width="700" height="340">
References:
<a href="https://parall.ax/products/jspdf">https://parall.ax/products/jspdf</a>
<a href="https://github.com/parallax/jsPDF">https://github.com/parallax/jsPDF</a>
<a href="http://raw.githack.com/MrRio/jsPDF/master/docs/">http://raw.githack.com/MrRio/jsPDF/master/docs/</a>
<a href="https://github.com/nagappan080810/jspdftutorial">https://github.com/nagappan080810/jspdftutorial</a>

Newsletter

Related Articles

Suggested keywords:

Newsletter

Related Articles