How To Convert HTML To PDF Using JavaScript

Talaviya Bhavdip

6y398k5425Blog

54 Comments

Join the conversation! Your thoughts help the community grow.

Dream dazzled1y ago
Pdf conversion sahi tarika batana chahiye pics to print page leke bhee ho jayega
srinivas prabhu2y ago
It is not working if the page contains header and footer images. Please let me know how to export HTML page with header and footer images
ash pandya5y ago
Please help me to get output in landscape
Dean Karl Chua5y ago
Multiple pages not working
Selva ganapathy6y ago
Image and more than one page not working, can you guide me.
martin s6y ago
Thank you very much
martin s6y ago
Very Useful
F0000_W6y ago
How do you make this work for multiple pages?
- F0000_W6y ago
  I see this question has already been asked by Maulik Manani, but there was no reply. Any help will be greatly appreciated.
jj ff6y ago
Hey how can i get the location to where this pdf file is saved and return it on my screen
dennis wang7y ago
Hi Talaviya thanks for ur post and it worked for me ,however the content of PDF is blurry.
Maulik Manani7y ago
Not Working for more than one page data.
sindhu kumar7y ago
Images is not come can you help me?
Milad Ramezanzadeh7y ago
Not working in other language like Arabic & Persian. what should I do?
- Talaviya Bhavdip7y ago
  Check JSpdf documentation and set the language http://raw.githack.com/MrRio/jsPDF/master/docs/
Arthur Shadrack7y ago
Not working for me please
Prasad Deshmukh7y ago
I have added same code with different data information. Its printed but not complete
kasif Shaikh7y ago
It shows half of the page cut other half
- Talaviya Bhavdip7y ago
  Please set the size of this jspdf variable
teodoro delint7y ago
Hi,, what's the code for orientation: Landscape?
- Talaviya Bhavdip7y ago
  Var doc = new jsPDF({ orientation: 'landscape', unit: 'in', format: [4, 2] }) doc.text('Hello world!', 1, 1) doc.save('two-by-four.pdf')
Tracy Livingston7y ago
How do I generate a PDF without the height and width limitations? The A4 in this sample is fine for width but my form is much taller and crops most of the bottom content in the PDF.
- Kaushik Dudhat7y ago
  You can set height and width to in a4 = [595.28, 841.89];
GOURAB ROUT8y ago
It was download only one page ,how to download multiple i mean auto page breaker if my data is long.
bainapalli krishna8y ago
It is not working
vijay akula8y ago
We approached the same with your code for our application. But we are facing issue like Unhandled exception at line 143, column 4305 in https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js 0x800a1391 - JavaScript runtime error: 'Promise' is undefined" Will you please help us to resolve this issue. Thanks in advance.
- sandhya reyya7y ago
  I am having the same issue
vijay akula8y ago
Hi Bhavdip,
Manu Tg8y ago
Hi sir,can u tell me how to convert 15 column table data int pdf?
Pramod Yadav8y ago
Hi sir can u tell me how save this pdf file to server side
bhargav tala8y ago
Hello i have implement it and its run successfully but resolution is not clear so can you help to improve it?
Shihui Wang8y ago
Why this doesn't work with IE11
rajashri thorat8y ago
Hi, I am trying to generate a PDF of SharePoint site page which is having HTML controls ,this code is working but on my page there are some check boxes, if I run the code in Crome the check boxes are displaying but In IE it is not showing the check boxes check ,it shows blank checkbox ,Please suggest
- Talaviya Bhavdip8y ago
  Please check your checkbox css and also check the your code is browser compatible or not
yatin chaudhari8y ago
Hello sir i have one image in the page so it not come in pdf file how it come
raju kumar8y ago
Hi can we print this as Letter size ?
Moeun Orn8y ago
Sorry i can opacity to good
Chinmoy Palui8y ago
Download pdf is not display all content . only display half portion. Any solution for it, I had increases the size but not working.
ankit pandey8y ago
Download PDF is not display all content . only display half portion.
- Talaviya Bhavdip8y ago
  You can set specific width also
ankit pandey8y ago
Exporting Data HTML as PDF in 5 Easy Steps
Dave Weller8y ago
Is there any way for the PDF to also display UL & OL points?
- Dave Weller8y ago
  Thanks for the reply, the page is HTML and the rest of the container prints to PDF just fine. I am not sure what you mean by this "and no have any open related your q" can you elaborate or reword? Thanks
- Talaviya Bhavdip8y ago
  If your page is html then you can and no have any open related your q.
Tarek Showkot8y ago
What's the point of half solution? It only generates one page PDF.
Ashish Jain8y ago
Hi Can You make this work for multiple pages. The community would be really grateful to you
Shiva Krishna8y ago
I have tried this code ,but it is not working ...can you please check the.... code once
Apexrays Technology9y ago
I have 2 pager html, but when i'll try to generate pdf it display me only single page.
Rajesh Kumar9y ago
Thanku Sir ,It is very useful and PDF is not downloading in IE and Crome
Kanniyappan Krish9y ago
Thanks, It is very useful and PDF is not downloading in IE and Firefox. Is there any solution for browser compatibility?
Xiuhui Liang9y ago
How to make it sharper?
Bayram TUĞCU9y ago
Thanks, very great blog. I wonder to multi page ? The code only one page convert pdf
Kaushik Dudhat9y ago
Thanks ,It is very helpful for me
Hardik Prajapati9y ago
Its great blog bhavdip sir, also very helpfull for me..!

Add the following script in HTML page for converting it to pdf.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

Add other two scripts for converting the document.

<script>
(function () {
var
form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Bhavdip-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
</script>
<script>
/*
* jQuery helper plugin for examples and tests
*/
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();
$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div ></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);
</script>

Now, let's see the output.

Click on the "Generate PDF " button and get the PDF file like this.

Introduction