{"id":2994,"date":"2022-09-03T16:13:17","date_gmt":"2022-09-03T11:13:17","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2994"},"modified":"2022-09-18T13:26:58","modified_gmt":"2022-09-18T08:26:58","slug":"jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/","title":{"rendered":"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript"},"content":{"rendered":"\n

In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I’ll use jsPDF .fromHTML()<\/strong> function for converting HTML5 to PDF file.<\/p>\n\n\n\n

The complete source code of this project including how to use jsPDF .fromHTML()<\/strong> is given in this tutorial.<\/p>\n\n\n\n

HTML5 to PDF using jsPDF .fromHTML()<\/h2>\n\n\n\n

index.html<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title> Reading <\/title>\n        <meta charset="utf-8" \/>\n    <\/head>\n    <body id="target">\n        <div id="page-content">\n            <h1 style="color: #fbceb5; background-color: 2d334a;\n            background: linear-gradient(to left, #6e5773 , #d8b5b5);" >\n                The Magic Of Reading <\/h1>\n\n            <p> \n                Reading is probably one of the most beneficial and feasible activities that a man can do.\n                It is through reading that a person is going to be able to discover new ideas, concepts, places, and people.\n                Some people even describe reading as a journey that starts as the opening of a page, and finishes as the last page is turned.\n                The reason why reading is so important is because reading is relaxing to our mind and soul; it is a way for children to reach out to the world,\n                and it improves our thinking process.\n            <\/p>\n            \n            <br\/>\n        <\/div>\n\n        <div style="text-align: center;">\n        <button id="click-button" style="background-color:rosybrown; border-color: rosybrown; height: 35px;"> Convert to PDF <\/button>\n        <\/div>\n    <\/body>\n    <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js"><\/script>\n    <script src="index.js"><\/script>\n    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/1.5.3\/jspdf.min.js"><\/script>\n    <script>\n    $(document).ready(function(){\n\n        var specialElementHandlers = {\n            "#editor": function(element, rendrer){\n                return true;\n            }\n        };\n\n        $('#click-button').click(function(){\n\n            var myDocument = new jsPDF();\n\n            myDocument.fromHTML($("#target").html(), 15, 15, {\n                "width":170,\n                "elementHandlers": specialElementHandlers\n            });\n\n            myDocument.save("File.pdf");\n        });\n\n    });\n    <\/script>\n<\/html><\/pre><\/div>\n\n\n\n
\"jsPDF<\/figure>\n\n\n\n
\"pdf<\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I’ll use jsPDF .fromHTML() function for converting HTML5 to PDF file. The complete source code of this project including how to use jsPDF .fromHTML() is given in this tutorial. … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\njsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I'll\" \/>\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-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I'll\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-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-03T11:13:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-18T08:26:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/jspdf_fromhtml.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=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript","description":"In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I'll","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-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript","og_description":"In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I'll","og_url":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-03T11:13:17+00:00","article_modified_time":"2022-09-18T08:26:58+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/jspdf_fromhtml.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript","datePublished":"2022-09-03T11:13:17+00:00","dateModified":"2022-09-18T08:26:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/"},"wordCount":73,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/jspdf_fromhtml.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/","name":"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/jspdf_fromhtml.jpg","datePublished":"2022-09-03T11:13:17+00:00","dateModified":"2022-09-18T08:26:58+00:00","description":"In this tutorial, I will teach you how to convert HTML5 tags like heading, div, and paragraphs to PDF using JavaScript. To make the process easier, I'll","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/jspdf_fromhtml.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/jspdf_fromhtml.jpg","width":880,"height":495,"caption":"jspdf fromhtml"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-fromhtml-convert-html-div-paragraphs-to-pdf-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in 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\/2994","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=2994"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2994\/revisions"}],"predecessor-version":[{"id":2997,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2994\/revisions\/2997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3336"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}