{"id":2978,"date":"2022-09-03T07:53:45","date_gmt":"2022-09-03T02:53:45","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2978"},"modified":"2022-09-03T08:32:29","modified_gmt":"2022-09-03T03:32:29","slug":"jspdf-addhtml-convert-html-tables-to-pdf-using-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/","title":{"rendered":"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript"},"content":{"rendered":"\n

In this tutorial, I will guide you on how to convert HTML tables to PDF document<\/strong> using jspdf<\/code> library and its addhtml()<\/code> method in JavaScript. Basically, the jsPDF addHTML()<\/strong> function accepts HTML5 code using its first parameter. It then converts the HTML5 code to PDF and gives us the option to download the PDF file using the callback function as the second parameter.<\/p>\n\n\n\n

The complete source code of this project is available in this article. So, you can easily download and run it on your computer.<\/p>\n\n\n\n

index.html<\/h2>\n\n\n\n
<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/1.3.3\/jspdf.debug.js"><\/script>\n<link rel="stylesheet" href="https:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/css\/bootstrap.min.css"\/>\n<link type="text\/css" rel="stylesheet" href="style.css"\/>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\n<script src="script.js"><\/script>\n\n<div id="customers">\n  <table id="tab_customers" class="table">\n        <thead>\n            <tr class='warning'>\n                <th>Region<\/th>\n                <th>Peril<\/th>\n                <th>Std Dev<\/th>\n                <th>Expected Loss<\/th>\n                <th>1% (100 yrs) TVAR<\/th>\n                <th>4% (250 yrs) TVAR<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n            <tr>\n                <td>All Region<\/td>\n                <td>All Peril<\/td>\n                <td>1,363,480,000<\/td>\n                <td>10,907,648,067<\/td>\n                <td>10,907,648,067<\/td>\n                <td>10,907,648,067<\/td>\n            <\/tr>\n            <tr>\n                <td>NA_CUSTOM (CUSTOM)<\/td>\n                <td>Earthquake<\/td>\n                <td>100,363,480,000<\/td>\n                <td>10,907,648,067<\/td>\n                <td>10,907,648,067<\/td>\n                <td>10,907,648,067<\/td>\n            <\/tr>\n            <tr>\n                <td>All<\/td>\n                <td>All<\/td>\n                <td>1,363<\/td>\n                <td>10,907<\/td>\n                <td>10,907<\/td>\n                <td>907.32<\/td>\n            <\/tr>\n            <tr>\n                <td>NA_CUSTOM<\/td>\n                <td>EQ<\/td>\n                <td>1,363<\/td>\n                <td>10,907<\/td>\n                <td>10,907<\/td>\n                <td>907.32<\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n<\/div>\n\n<button onclick="javascript:demoFromHTML();">PDF<\/button><\/pre><\/div>\n\n\n\n
style.css<\/h2>\n\n\n\n
body{padding:0; margin:0;}\n#tab_customers{background:#fff;}\n.center {\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n\/*   width: 50%; *\/\n}<\/pre><\/div>\n\n\n\n
script.js<\/h2>\n\n\n\n
function demoFromHTML() {\n    var pdf = new jsPDF('p', 'pt', 'A3');\n    \/\/ source can be HTML-formatted string, or a reference\n    \/\/ to an actual DOM element from which the text will be scraped.\n    source = $('#customers')[0];\n    \n    pdf.addHTML(source,function() {\n    pdf.save('PDF_'+ Math.random().toString(36).slice(2) +'.pdf');\n});\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically, the jsPDF addHTML() function accepts HTML5 code using its first parameter. It then converts the HTML5 code to PDF and gives us the option to download the PDF file … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\njsPDF addHTML() Convert HTML Tables to PDF Using JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically,\" \/>\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.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-03T02:53:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-03T03:32:29+00:00\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript","description":"In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically,","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.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript","og_description":"In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically,","og_url":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-03T02:53:45+00:00","article_modified_time":"2022-09-03T03:32:29+00:00","author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript","datePublished":"2022-09-03T02:53:45+00:00","dateModified":"2022-09-03T03:32:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/"},"wordCount":99,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/","name":"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-03T02:53:45+00:00","dateModified":"2022-09-03T03:32:29+00:00","description":"In this tutorial, I will guide you on how to convert HTML tables to PDF document using jspdf library and its addhtml() method in JavaScript. Basically,","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-addhtml-convert-html-tables-to-pdf-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jsPDF addHTML() Convert HTML Tables to PDF Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=2978"}],"version-history":[{"count":5,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2978\/revisions"}],"predecessor-version":[{"id":2984,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2978\/revisions\/2984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}