{"id":4021,"date":"2019-06-04T21:08:03","date_gmt":"2019-06-04T21:08:03","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4021"},"modified":"2024-07-10T06:00:16","modified_gmt":"2024-07-10T06:00:16","slug":"convert-html-to-pdf-using-javascript-jspdf","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/","title":{"rendered":"Convert HTML to PDF using JavaScript"},"content":{"rendered":"<p><b>PDF file<\/b> format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use. With export to PDF functionality, the HTML content is converted to a PDF document and downloaded as a PDF file. In the dynamic web application, a server-side script is used to convert HTML to PDF and <a href=\"https:\/\/www.codexworld.com\/convert-html-to-pdf-php-dompdf\/\">generate PDF file using PHP<\/a>.<\/p>\n<p>If you want a client-side solution to generate PDF documents, JavaScript is the easiest way to <b>convert HTML to PDF<\/b>. There are various JavaScript library is available to generate PDF from HTML. The <b>jsPDF<\/b> is one of the best library to convert HTML to PDF using JavaScript. In this tutorial, we will show you how to generate PDF document and <b>convert HTML to PDF using JavaScript<\/b> and jsPDF library.<\/p>\n<p>In this example script, we will share code snippets to handle PDF creation and HTML to PDF conversion related operations using JavaScript.<\/p>\n<h2>Include jsPDF Library<\/h2>\n<p>The jQuery library is not required, just include the jsPDF library file to use the jsPDF class.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- jsPDF library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jsPDF\/dist\/jspdf.umd.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><span class=\"note\">Note that:<\/span> You don&#8217;t need to download the jsPDF library separately, all the required files are included in our source code package.<\/p>\n<h2>Load and Initiate jsPDF Class<\/h2>\n<p>Use the following line of code to initiate the jsPDF class and use the jsPDF object in JavaScript.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.jsPDF = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.jspdf.jsPDF;\r\n\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> doc = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> jsPDF();<\/pre>\n<h2>Generate PDF using JavaScript<\/h2>\n<p>The following example shows how to use the jsPDF library to generate PDF file using JavaScript.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Specify the content in <b>text()<\/b> method of jsPDF object.<\/li>\n<li>Use the <b>addPage()<\/b> method to add new page to PDF.<\/li>\n<li>Use the <b>save()<\/b> method to generate and download PDF file.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> doc = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> jsPDF();\r\n\t\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Hello world!'<\/span>);\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">30<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'This is client-side Javascript to generate a PDF.'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add new page<\/span>\r\ndoc.addPage();\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Visit CodexWorld.com'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save the PDF<\/span>\r\ndoc.save(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'document.pdf'<\/span>);<\/pre>\n<p>Use the <b>addImage()<\/b> method to add image to PDF using <code>jsPDF<\/code> object.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The source image path\/URL must be specified in first parameter in the <code>addImage()<\/code> method.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\">doc.addImage(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"path\/to\/image.jpg\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"JPEG\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">15<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">40<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">180<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">180<\/span>);<\/pre>\n<h2>Convert HTML Content to PDF using JavaScript<\/h2>\n<p>The following example shows how to use the jsPDF library to <b>convert HTML to PDF<\/b> and generate PDF file from HTML content using JavaScript.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the HTML content from the specific element by ID or class.<\/li>\n<li>Convert HTML content of the specific part of the web page and generate PDF.<\/li>\n<li>Save and download the HTML content as a PDF file.<\/li>\n<\/ul>\n<p><b>HTML Code:<\/b><\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"content\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- HTML contnet goes here --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript Code:<\/b><\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.jsPDF = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.jspdf.jsPDF;\r\n\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> doc = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> jsPDF();\r\n\t\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Source HTMLElement or a string containing HTML.<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> elementHTML = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#contnet\"<\/span>);\r\n\r\ndoc.html(elementHTML, {\r\n    callback: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">doc<\/span>) <\/span>{\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save the PDF<\/span>\r\n        doc.save(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'sample-document.pdf'<\/span>);\r\n    },\r\n    x: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">15<\/span>,\r\n    y: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">15<\/span>,\r\n    width: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">170<\/span>, <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/target width in the PDF document<\/span>\r\n    windowWidth: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">650<\/span> <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/window width in CSS pixels<\/span>\r\n});<\/pre>\n<h2>Useful Configurations<\/h2>\n<p>The jsPDF library provides various methods and options to configure the PDF creation. Some of the useful methods of jsPDF class are given below that are commonly used to export HTML to PDF using jQuery.<\/p>\n<p><b>Change Paper Orientation:<\/b><br \/>\nUse the <code>orientation<\/code> option to set the paper orientation of the PDF.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> doc = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> jsPDF({\r\n    orientation: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'landscape'<\/span>\r\n});\r\n\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Hello world!'<\/span>);\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">30<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'This is client-side Javascript to generate a PDF.'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add new page<\/span>\r\ndoc.addPage();\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Visit CodexWorld.com'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save the PDF<\/span>\r\ndoc.save(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'document.pdf'<\/span>);<\/pre>\n<p><b>Change Text Font:<\/b><br \/>\nUse <code>setFont()<\/code> method to set text font faces, text alignment and rotation in the PDF.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> doc = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> jsPDF();\r\n\t\r\ndoc.text(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'This is the default font.'<\/span>);\r\n\r\ndoc.setFont(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"courier\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"normal\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"This is courier normal.\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">30<\/span>);\r\n\r\ndoc.setFont(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"times\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"italic\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"This is times italic.\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">40<\/span>);\r\n\r\ndoc.setFont(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"helvetica\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"bold\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"This is helvetica bold.\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">50<\/span>);\r\n\r\ndoc.setFont(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"courier\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"bolditalic\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"This is courier bolditalic.\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">60<\/span>);\r\n\r\ndoc.setFont(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"times\"<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"normal\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"This is centred text.\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">105<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">80<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"center\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"And a little bit more underneath it.\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">105<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">90<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"center\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"This is right aligned text\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">200<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">100<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"right\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"And some more\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">200<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">110<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"right\"<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Back to left\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">120<\/span>);\r\n\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"10 degrees rotated\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">140<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>);\r\ndoc.text(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"-10 degrees rotated\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">160<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-10<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save the PDF<\/span>\r\ndoc.save(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'document.pdf'<\/span>);<\/pre>\n<h2>Convert HTML Content to PDF with Images and Multiple Pages<\/h2>\n<p>In this example code snippet, we will show how to use the jsPDF library to convert HTML to PDF and generate PDF file from HTML content including images using JavaScript.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The absolute or relative file paths can be used in the image src.<\/li>\n<li>The <b>html2canvas<\/b> library is required to convert HTML content (with images) to PDF document.<\/li>\n<li>The <b>autoPaging<\/b> option helps to break PDF document in multiple pages automatically.<\/li>\n<\/ul>\n<p><b>JavaScript:<\/b><\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.jsPDF = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.jspdf.jsPDF;\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Convert HTML content to PDF<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">Convert_HTML_To_PDF<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> doc = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> jsPDF();\r\n\t\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Source HTMLElement or a string containing HTML.<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> elementHTML = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#contentToPrint\"<\/span>);\r\n\r\n    doc.html(elementHTML, {\r\n        callback: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">doc<\/span>) <\/span>{\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save the PDF<\/span>\r\n            doc.save(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'document-html.pdf'<\/span>);\r\n        },\r\n        margin: [<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>],\r\n        autoPaging: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'text'<\/span>,\r\n        x: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>,\r\n        y: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>,\r\n        width: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">190<\/span>, <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/target width in the PDF document<\/span>\r\n        windowWidth: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">675<\/span> <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/window width in CSS pixels<\/span>\r\n    });\r\n}<\/pre>\n<p><b>HTML:<\/b><\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-meta\" style=\"color: rgb(174, 115, 19);\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"en\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">head<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- html2canvas library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/html2canvas.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- jsPDF library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jsPDF\/dist\/jspdf.umd.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><span class=\"actionscript\">\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">\/* Place custom JavaScript code here *\/<\/span>\r\n<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">head<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">body<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Trigger button --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Convert_HTML_To_PDF();\"<\/span>&gt;<\/span>Convert HTML to PDF<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- HTML content for PDF creation --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"contentToPrint\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h1<\/span>&gt;<\/span>What is Lorem Ipsum?<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h1<\/span>&gt;<\/span>\r\n\t\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n\t\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"path\/to\/image.jpg\"<\/span>&gt;<\/span>\r\n\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"path\/to\/image_2.jpeg\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">body<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">html<\/span>&gt;<\/span>\r\n<\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/create-pdf-with-watermark-in-php-using-dompdf\/\">Create PDF with Watermark in PHP using Dompdf<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>Our example code helps you to convert HTML to PDF and generate PDF file using JavaScript. You can easily add the <b>Export to PDF<\/b> functionality on the web page without depending on the server-side script. The PDF creation functionality can be enhanced with jsPDF configuration options as per your needs. Download our source code package to get all the required files including the jsPDF JavaScript library.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PDF file format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use. With export to PDF functionality, the HTML <\/p>\n","protected":false},"author":1,"featured_media":5094,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[179,354,66,16,353,166,181],"class_list":["post-4021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-html","tag-html2canvas","tag-javascript","tag-jquery","tag-jspdf","tag-library","tag-pdf","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Convert HTML to PDF using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"HTML to PDF with JavaScript - Convert HTML content to PDF using jsPDF and jQuery. Example code to generate PDF document from HTML content of the web page in JavaScript using jsPDF library.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Convert HTML to PDF using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"HTML to PDF with JavaScript - Convert HTML content to PDF using jsPDF and jQuery. Example code to generate PDF document from HTML content of the web page in JavaScript using jsPDF library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-04T21:08:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-10T06:00:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Convert HTML to PDF using JavaScript\",\"datePublished\":\"2019-06-04T21:08:03+00:00\",\"dateModified\":\"2024-07-10T06:00:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/\"},\"wordCount\":602,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png\",\"keywords\":[\"HTML\",\"html2canvas\",\"JavaScript\",\"jQuery\",\"jsPDF\",\"Library\",\"PDF\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/\",\"name\":\"Convert HTML to PDF using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png\",\"datePublished\":\"2019-06-04T21:08:03+00:00\",\"dateModified\":\"2024-07-10T06:00:16+00:00\",\"description\":\"HTML to PDF with JavaScript - Convert HTML content to PDF using jsPDF and jQuery. Example code to generate PDF document from HTML content of the web page in JavaScript using jsPDF library.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"convert-export-html-to-pdf-using-javascript-jspdf-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/convert-html-to-pdf-using-javascript-jspdf\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Convert HTML to PDF using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Convert HTML to PDF using JavaScript - CodexWorld","description":"HTML to PDF with JavaScript - Convert HTML content to PDF using jsPDF and jQuery. Example code to generate PDF document from HTML content of the web page in JavaScript using jsPDF library.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/","og_locale":"en_US","og_type":"article","og_title":"Convert HTML to PDF using JavaScript - CodexWorld","og_description":"HTML to PDF with JavaScript - Convert HTML content to PDF using jsPDF and jQuery. Example code to generate PDF document from HTML content of the web page in JavaScript using jsPDF library.","og_url":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-06-04T21:08:03+00:00","article_modified_time":"2024-07-10T06:00:16+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Convert HTML to PDF using JavaScript","datePublished":"2019-06-04T21:08:03+00:00","dateModified":"2024-07-10T06:00:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/"},"wordCount":602,"commentCount":11,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png","keywords":["HTML","html2canvas","JavaScript","jQuery","jsPDF","Library","PDF"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/","url":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/","name":"Convert HTML to PDF using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png","datePublished":"2019-06-04T21:08:03+00:00","dateModified":"2024-07-10T06:00:16+00:00","description":"HTML to PDF with JavaScript - Convert HTML content to PDF using jsPDF and jQuery. Example code to generate PDF document from HTML content of the web page in JavaScript using jsPDF library.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png","width":1366,"height":768,"caption":"convert-export-html-to-pdf-using-javascript-jspdf-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/convert-html-to-pdf-using-javascript-jspdf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Convert HTML to PDF using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/06\/convert-export-html-to-pdf-using-javascript-jspdf-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-12R","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=4021"}],"version-history":[{"count":10,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4021\/revisions"}],"predecessor-version":[{"id":5685,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4021\/revisions\/5685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5094"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}