{"id":3090,"date":"2022-09-12T02:07:57","date_gmt":"2022-09-11T21:07:57","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3090"},"modified":"2022-09-12T02:07:59","modified_gmt":"2022-09-11T21:07:59","slug":"convert-html-to-pdf-using-javascript-html2pdf-js-library","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/","title":{"rendered":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library"},"content":{"rendered":"\n

Install html2pdf Library<\/h2>\n\n\n\n

Add html2pdf library in your code using CDN.<\/p>\n\n\n\n

<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.8.0\/html2pdf.bundle.min.js"><\/script><\/pre><\/div>\n\n\n\n
HTML to PDF Using JavaScript Code<\/h2>\n\n\n\n
index.html<\/h3>\n\n\n\n
<link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css">\n<div id="canvas_div_pdf">\n\n<!--Add HTML content you want to convert to PDF-->\n<p>hello this is a paragraph<\/p>\n\n<table class="table table-dark">\n    <thead>\n      <tr>\n        <th>Firstname<\/th>\n        <th>Lastname<\/th>\n        <th>Email<\/th>\n      <\/tr>\n    <\/thead>\n    <tbody>\n      <tr>\n        <td>John<\/td>\n        <td>Doe<\/td>\n        <td>john@example.com<\/td>\n      <\/tr>\n      <tr>\n        <td>Mary<\/td>\n        <td>Moe<\/td>\n        <td>mary@example.com<\/td>\n      <\/tr>\n      <tr>\n        <td>July<\/td>\n        <td>Dooley<\/td>\n        <td>july@example.com<\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n  \n<\/div>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.8.0\/html2pdf.bundle.min.js"><\/script>\n<script>\n\n var element = document.getElementById('canvas_div_pdf');\nhtml2pdf(element);\n<\/script><\/pre><\/div>\n\n\n\n
You can also pass the custom\u00a0options<\/code>\u00a0to the html2pdf library as shown below. It will add custom\u00a0margin<\/code>\u00a0to the pdf document and also pass the\u00a0filename<\/code>\u00a0and also pass the\u00a0html2canvas<\/code>\u00a0and\u00a0jspdf<\/code>\u00a0library.<\/p>\n\n\n\n
html2pdf(element, {\n  margin:       10,\n  filename:     'myfile.pdf',\n  image:        { type: 'jpeg', quality: 0.98 },\n  html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },\n  jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }\n});<\/pre><\/div>\n\n\n\n
Output Screenshot<\/h2>\n\n\n\n
\"HTML<\/figure>\n","protected":false},"excerpt":{"rendered":"
Install html2pdf Library Add html2pdf library in your code using CDN. HTML to PDF Using JavaScript Code index.html You can also pass the custom\u00a0options\u00a0to the html2pdf library as shown below. It will add custom\u00a0margin\u00a0to the pdf document and also pass the\u00a0filename\u00a0and also pass the\u00a0html2canvas\u00a0and\u00a0jspdf\u00a0library. Output Screenshot<\/p>\n","protected":false},"author":1,"featured_media":3092,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nConvert HTML to PDF Using JavaScript HTML2PDF.js Library<\/title>\n<meta name=\"description\" content=\"Install html2pdf Library Add html2pdf library in your code using CDN. <script\" \/>\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\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/\" \/>\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 HTML2PDF.js Library\" \/>\n<meta property=\"og:description\" content=\"Install html2pdf Library Add html2pdf library in your code using CDN. <script\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-11T21:07:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-11T21:07:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/html2pdf_using_javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library","description":"Install html2pdf Library Add html2pdf library in your code using CDN. <script","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\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/","og_locale":"en_US","og_type":"article","og_title":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library","og_description":"Install html2pdf Library Add html2pdf library in your code using CDN. <script","og_url":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-11T21:07:57+00:00","article_modified_time":"2022-09-11T21:07:59+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/html2pdf_using_javascript.jpg","type":"image\/jpeg"}],"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\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library","datePublished":"2022-09-11T21:07:57+00:00","dateModified":"2022-09-11T21:07:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/"},"wordCount":65,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/html2pdf_using_javascript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/","url":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/","name":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/html2pdf_using_javascript.jpg","datePublished":"2022-09-11T21:07:57+00:00","dateModified":"2022-09-11T21:07:59+00:00","description":"Install html2pdf Library Add html2pdf library in your code using CDN. <script","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/html2pdf_using_javascript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/html2pdf_using_javascript.jpg","width":880,"height":495,"caption":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/convert-html-to-pdf-using-javascript-html2pdf-js-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Convert HTML to PDF Using JavaScript HTML2PDF.js Library"}]},{"@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:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","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\/3090","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=3090"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3090\/revisions"}],"predecessor-version":[{"id":3094,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3090\/revisions\/3094"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3092"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}