{"id":428,"date":"2021-12-16T16:30:08","date_gmt":"2021-12-16T07:30:08","guid":{"rendered":"https:\/\/blog.mydepot.kr\/?p=428"},"modified":"2021-12-16T16:31:00","modified_gmt":"2021-12-16T07:31:00","slug":"javascript-html-png-%eb%82%98-pdf%eb%a1%9c-%ec%a0%80%ec%9e%a5%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/blog.mydepot.kr\/?p=428","title":{"rendered":"[javascript] HTML -> PNG \ub098 PDF\ub85c \uc800\uc7a5\ud558\uae30"},"content":{"rendered":"\n<p>\ud544\uc694 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>jspdf : <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/parallax\/jsPDF\" target=\"_blank\">https:\/\/github.com\/parallax\/jsPDF<\/a><\/li><li>html2canvas : <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/niklasvh\/html2canvas\" target=\"_blank\">https:\/\/github.com\/niklasvh\/html2canvas<\/a><\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/\/ \uc0d8\ud50c \ucf54\ub4dc\n\nlet elemSelector = &quot;body&quot;;\n\nconst { jsPDF } = window.jspdf;\n\nif(elemSelector === &quot;&quot;){\n      elemSelector = prompt(&quot;\uc694\uc18c\uac12\uc744 \uc785\ub825\ud574 \uc8fc\uc138\uc694. (ex: body, #elemBox)&quot;);\n}\n\nif(elemSelector !== &quot;&quot;){\n      html2canvas(document.querySelector(elemSelector)).then(function(canvas) {\n            \/\/ \uc774\ubbf8\uc9c0 \uc0dd\uc131\n            document.body.appendChild(canvas);\n\n            \/\/ \uc774\ubbf8\uc9c0 \ub2e4\uc6b4\ub85c\ub4dc\n            var a = document.createElement(&#039;a&#039;);\n            a.href = canvas.toDataURL(&#039;image\/png&#039;);\n            a.download = &quot;capture.png&quot;;\n            document.body.appendChild(a);\n            a.click();\n\n            \/\/ PDF \uc0dd\uc131\n            var imgData = canvas.toDataURL(&#039;image\/png&#039;);\n            var imgWidth = 210;\n            var pageHeight = imgWidth * 1.414;\n            var imgHeight = canvas.height * imgWidth \/ canvas.width;\n      \n            var doc = new jsPDF({\n                  &#039;orientation&#039;: &#039;p&#039;,\n                  &#039;unit&#039;: &#039;mm&#039;,\n                  &#039;format&#039;: &#039;a4&#039;\n            });\n      \n            doc.addImage(imgData, &#039;PNG&#039;, 0, 0, imgWidth, imgHeight);\n            doc.save(&#039;capture.pdf&#039;);\n      });\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\ud544\uc694 \ub77c\uc774\ube0c\ub7ec\ub9ac jspdf : https:\/\/github.com\/parallax\/jsPDF html2canvas : https:\/\/github.com\/niklasvh\/html2canvas<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[7],"tags":[13,196,197,198,199],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-13","tag-196","tag-197","tag-pdf","tag-png"],"modified_by":"\ucc38\ube5b\ubc14\ub2e4","_links":{"self":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=428"}],"version-history":[{"count":2,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts\/428\/revisions\/430"}],"wp:attachment":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}