{"id":2084,"date":"2022-07-06T13:28:33","date_gmt":"2022-07-06T08:28:33","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2084"},"modified":"2022-07-06T13:28:36","modified_gmt":"2022-07-06T08:28:36","slug":"jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/","title":{"rendered":"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript"},"content":{"rendered":"\n<p>It seems that the code works but doesn\u2019t scale too well.<\/p>\n\n\n\n<p>It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC) isn\u2019t given the opportunity to clear intermediate objects, and an oversized heap causes the crash.<\/p>\n\n\n\n<p>Performing the operations in series may have a positive effect. The code is simply derived from the code in the question.<\/p>\n\n\n\n<p>First, an adaptor function, which promisifies <code>html2canvas()<\/code> :<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">function html2canvasAsync(element) {\n    return new Promise(function(resolve, reject) {\n        html2canvas(element, {\n            onrendered: function (canvas) {\n                resolve(canvas.toDataURL('image\/png'));\n            }\n        });\n    });\n};<\/pre><\/div>\n\n\n\n<p>Now call <code>divNamesForPDF.reduce(\u2026)<\/code> to serialize the asynchronous operations and progressively add to the jsPDF <code>doc<\/code> :<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">function GeneratePDFforCharts(divNamesForPDF) {\n    if (window.Promise) {\n        var doc = new jsPDF('l', 'mm', [297, 210], true); \/\/true is set for pdf compression\n        return divNamesForPDF.reduce(function(p, name, i) {\n            return p.then(function(pageNumber) {\n                return html2canvasAsync($(name).get(0)) \/\/ or `document.getElementById(name)` ?\n                \/\/ return html2canvasAsync(document.getElementById(name)) \/\/ possibly?\n                .then(function(canvas) {\n                    if (isOdd(i)) { \/\/ odds\n                        doc.addImage(canvas, 'PNG', 10, 105, 270, 100, null, 'FAST'); \/\/x, y, width, height - FAST is used for png compression\n                        doc.text(140, 207, pageNumber.toString()); \/\/x, y, text\n                        pageNumber++;\n                    } else { \/\/ evens\n                        if (i &gt; 0) {\n                            doc.addPage();\n                        }\n                        doc.addImage(canvas, 'PNG', 10, 5, 270, 100, null, 'FAST');\n                    }\n                    return pageNumber;\n                }).catch(function(e) {\n                    \/\/ Error handling is a good idea\n                    console.log(e);\n                    doc.text(35, 25, e.message); \/\/ possibly add the error message to doc\n                });\n            });\n        }, Promise.resolve(1)) \/\/ starter promise resolved with page number 1\n        .then(function() {\n            doc.save('IEA_Global_MonthlyStocks_Analytics.pdf');\n        });\n    }\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It seems that the code works but doesn\u2019t scale too well. It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC) isn\u2019t given the opportunity to clear intermediate objects, and an oversized heap causes the crash. Performing the operations in series may have a positive effect. The code is simply derived from &#8230; <a title=\"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/\" aria-label=\"Read more about jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript\">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-2084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript<\/title>\n<meta name=\"description\" content=\"It seems that the code works but doesn\u2019t scale too well. It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC)\" \/>\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-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript\" \/>\n<meta property=\"og:description\" content=\"It seems that the code works but doesn\u2019t scale too well. It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-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-07-06T08:28:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-06T08:28:36+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=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript","description":"It seems that the code works but doesn\u2019t scale too well. It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC)","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-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript","og_description":"It seems that the code works but doesn\u2019t scale too well. It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC)","og_url":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-07-06T08:28:33+00:00","article_modified_time":"2022-07-06T08:28:36+00:00","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-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript","datePublished":"2022-07-06T08:28:33+00:00","dateModified":"2022-07-06T08:28:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/"},"wordCount":98,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-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-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/","name":"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document in JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-07-06T08:28:33+00:00","dateModified":"2022-07-06T08:28:36+00:00","description":"It seems that the code works but doesn\u2019t scale too well. It\u2019s possible that by performing all operations in parallel, javascript\u2019s Garbage Collection (GC)","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-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-html2canvas-project-export-multiple-google-charts-from-webpage-to-pdf-document-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jsPDF Html2Canvas Project: Export Multiple Google Charts from Webpage to PDF Document 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\/2084","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=2084"}],"version-history":[{"count":0,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2084\/revisions"}],"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=2084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}