{"id":928,"date":"2025-12-24T10:57:33","date_gmt":"2025-12-24T02:57:33","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=928"},"modified":"2025-12-24T10:57:33","modified_gmt":"2025-12-24T02:57:33","slug":"%e5%9f%ba%e4%ba%8ejavascript%e5%ae%9e%e7%8e%b0html%e5%88%b0pdf%e7%9a%84%e8%bd%ac%e6%8d%a2%e6%8c%87%e5%8d%97-2","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/24\/%e5%9f%ba%e4%ba%8ejavascript%e5%ae%9e%e7%8e%b0html%e5%88%b0pdf%e7%9a%84%e8%bd%ac%e6%8d%a2%e6%8c%87%e5%8d%97-2\/","title":{"rendered":"\u57fa\u4e8eJavaScript\u5b9e\u73b0HTML\u5230PDF\u7684\u8f6c\u6362\u6307\u5357\u00a0"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>\u57fa\u4e8e JavaScript \u7684 HTML \u2192 PDF \u8f6c\u6362\u5b8c\u6574\u6307\u5357<\/strong>\uff0c\u6db5\u76d6\u6d4f\u89c8\u5668\u7aef\u3001Node.js \u73af\u5883\u4ee5\u53ca\u5e38\u7528\u5e93\u548c\u6280\u5de7\uff0c\u4fbf\u4e8e\u5feb\u901f\u5b9e\u73b0\u7f51\u9875\u6216\u5185\u5bb9\u5bfc\u51fa PDF\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u57fa\u4e8e JavaScript \u7684 HTML \u5230 PDF \u8f6c\u6362\u6307\u5357<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u5e38\u7528\u573a\u666f<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u524d\u7aef\u5bfc\u51fa\u62a5\u8868\u3001\u53d1\u7968\u3001\u5408\u540c<\/li>\n\n\n\n<li>\u670d\u52a1\u7aef\u751f\u6210\u6587\u6863\u6216\u8d26\u5355<\/li>\n\n\n\n<li>\u6253\u5370\u7f51\u9875\u5185\u5bb9\u6216\u751f\u6210\u9759\u6001\u5907\u4efd<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u5b9e\u73b0\u65b9\u5f0f\u6982\u89c8<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u6cd5<\/th><th>\u9002\u7528\u73af\u5883<\/th><th>\u7279\u70b9<\/th><th>\u5e38\u7528\u5e93<\/th><\/tr><\/thead><tbody><tr><td>\u6d4f\u89c8\u5668\u7aef JS<\/td><td>\u6d4f\u89c8\u5668<\/td><td>\u7528\u6237\u7aef\u76f4\u63a5\u751f\u6210 PDF\uff0c\u65e0\u9700\u670d\u52a1\u7aef<\/td><td><code>jsPDF<\/code>, <code>html2canvas<\/code><\/td><\/tr><tr><td>Node.js<\/td><td>\u670d\u52a1\u7aef<\/td><td>\u751f\u6210 PDF \u53ef\u81ea\u52a8\u5316\u6216\u6279\u91cf\u5904\u7406<\/td><td><code>puppeteer<\/code>, <code>playwright<\/code>, <code>pdfkit<\/code><\/td><\/tr><tr><td>API \/ \u670d\u52a1<\/td><td>\u4efb\u4f55\u73af\u5883<\/td><td>\u901a\u8fc7\u7b2c\u4e09\u65b9 API \u8f6c\u6362\uff0c\u5feb\u901f\u7b80\u5355<\/td><td><code>pdfcrowd<\/code>, <code>html2pdf<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u6d4f\u89c8\u5668\u7aef\u5b9e\u73b0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.1 \u4f7f\u7528 <code>jsPDF<\/code> + <code>html2canvas<\/code><\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5c06 HTML \u8f6c\u4e3a Canvas\uff0c\u518d\u5bfc\u51fa PDF<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div id=&quot;content&quot;&gt;\n    &amp;lt;h1&gt;\u6807\u9898&amp;lt;\/h1&gt;\n    &amp;lt;p&gt;\u8fd9\u662f\u5bfc\u51fa PDF \u7684\u5185\u5bb9&amp;lt;\/p&gt;\n&amp;lt;\/div&gt;\n&amp;lt;button id=&quot;download&quot;&gt;\u4e0b\u8f7d PDF&amp;lt;\/button&gt;\n\n&amp;lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/jspdf@2.5.1\/dist\/jspdf.umd.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script&gt;\ndocument.getElementById(&#039;download&#039;).onclick = async () =&gt; {\n    const { jsPDF } = window.jspdf;\n    const doc = new jsPDF(&#039;p&#039;, &#039;pt&#039;, &#039;a4&#039;);\n    \n    const content = document.getElementById(&#039;content&#039;);\n    const canvas = await html2canvas(content, { scale: 2 });\n    const imgData = canvas.toDataURL(&#039;image\/png&#039;);\n\n    const pageWidth = doc.internal.pageSize.getWidth();\n    const pageHeight = doc.internal.pageSize.getHeight();\n    const imgProps = doc.getImageProperties(imgData);\n    const pdfHeight = (imgProps.height * pageWidth) \/ imgProps.width;\n\n    doc.addImage(imgData, &#039;PNG&#039;, 0, 0, pageWidth, pdfHeight);\n    doc.save(&#039;output.pdf&#039;);\n};\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p><strong>\u4f18\u70b9\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7b80\u5355\uff0c\u65e0\u9700\u670d\u52a1\u7aef<\/li>\n\n\n\n<li>\u53ef\u5bfc\u51fa\u4efb\u610f HTML \u5185\u5bb9<\/li>\n<\/ul>\n\n\n\n<p><strong>\u7f3a\u70b9\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u957f\u9875\u9762\u5206\u9875\u5904\u7406\u590d\u6742<\/li>\n\n\n\n<li>CSS \u6837\u5f0f\u90e8\u5206\u53ef\u80fd\u4e22\u5931<\/li>\n\n\n\n<li>\u5927\u9875\u9762\u751f\u6210 PDF \u53ef\u80fd\u5185\u5b58\u6d88\u8017\u9ad8<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.2 \u4f7f\u7528 <code>html2pdf.js<\/code>\uff08\u5c01\u88c5\u65b9\u6848\uff09<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script&gt;\ndocument.getElementById(&#039;download&#039;).onclick = () =&gt; {\n    const element = document.getElementById(&#039;content&#039;);\n    html2pdf()\n        .set({ margin: 10, filename: &#039;output.pdf&#039;, html2canvas: { scale: 2 } })\n        .from(element)\n        .save();\n};\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>html2pdf.js \u5e95\u5c42\u4ecd\u4f7f\u7528 jsPDF + html2canvas\uff0c\u5c01\u88c5\u4e86\u5206\u9875\u3001\u7f29\u653e\u548c\u5bfc\u51fa\u3002<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 Node.js \u670d\u52a1\u7aef\u5b9e\u73b0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4.1 \u4f7f\u7528 Puppeteer<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u57fa\u4e8e Chromium \u7684\u65e0\u5934\u6d4f\u89c8\u5668\uff0c\u53ef\u6e32\u67d3\u5b8c\u6574 HTML \u5e76\u751f\u6210 PDF<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst puppeteer = require(&#039;puppeteer&#039;);\n\n(async () =&gt; {\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  await page.goto(&#039;https:\/\/example.com&#039;, { waitUntil: &#039;networkidle0&#039; });\n  \n  await page.pdf({\n    path: &#039;example.pdf&#039;,\n    format: &#039;A4&#039;,\n    printBackground: true\n  });\n\n  await browser.close();\n})();\n\n<\/pre><\/div>\n\n\n<p><strong>\u4f18\u70b9\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u652f\u6301\u5b8c\u6574 CSS\u3001JS \u6e32\u67d3<\/li>\n\n\n\n<li>\u5206\u9875\u3001\u9875\u7709\u9875\u811a\u3001\u80cc\u666f\u8272\u53ef\u81ea\u5b9a\u4e49<\/li>\n\n\n\n<li>\u53ef\u5904\u7406\u957f\u9875\u9762\u548c\u52a8\u6001\u5185\u5bb9<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4.2 \u4f7f\u7528 Playwright<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst { chromium } = require(&#039;playwright&#039;);\n\n(async () =&gt; {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n  await page.goto(&#039;https:\/\/example.com&#039;);\n  await page.pdf({ path: &#039;example.pdf&#039;, format: &#039;A4&#039; });\n  await browser.close();\n})();\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Playwright \u4e0e Puppeteer \u7c7b\u4f3c\uff0c\u652f\u6301\u591a\u6d4f\u89c8\u5668<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4.3 \u4f7f\u7528 PDFKit\uff08\u7eaf Node.js \u7ed8\u5236\uff09<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9002\u5408\u751f\u6210\u6587\u672c\u3001\u56fe\u8868\u7b49\u7ed3\u6784\u5316 PDF\uff0c\u800c\u4e0d\u662f HTML \u9875\u9762<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst PDFDocument = require(&#039;pdfkit&#039;);\nconst fs = require(&#039;fs&#039;);\n\nconst doc = new PDFDocument();\ndoc.pipe(fs.createWriteStream(&#039;output.pdf&#039;));\n\ndoc.fontSize(25).text(&#039;Hello PDFKit&#039;, 100, 100);\ndoc.end();\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 \u5bfc\u51fa\u6280\u5de7<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5904\u7406\u957f\u9875\u9762<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6d4f\u89c8\u5668\u7aef\u4f7f\u7528 html2canvas \u5206\u6bb5\u622a\u56fe<\/li>\n\n\n\n<li>Puppeteer\/Playwright \u53ef\u81ea\u52a8\u5206\u9875 <code>page.pdf({ format: 'A4', printBackground: true })<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u4fdd\u7559 CSS<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u786e\u4fdd\u6240\u6709 CSS \u5df2\u52a0\u8f7d\uff08\u5b57\u4f53\u3001\u56fe\u7247\u3001\u80cc\u666f\u8272\uff09<\/li>\n\n\n\n<li>Puppeteer \u652f\u6301 <code>printBackground: true<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u52a8\u6001\u5185\u5bb9<\/strong><ul><li>\u7b49\u5f85 JS \u6e32\u67d3\u5b8c\u6210\u518d\u5bfc\u51fa\uff1a<\/li><\/ul><code>await page.waitForSelector('#content');<\/code><\/li>\n\n\n\n<li><strong>\u81ea\u5b9a\u4e49\u9875\u7709\/\u9875\u811a<\/strong><code>await page.pdf({ path: 'output.pdf', format: 'A4', displayHeaderFooter: true, headerTemplate: '&lt;div style=\"font-size:12px\">\u9875\u7709&lt;\/div>', footerTemplate: '&lt;div style=\"font-size:12px\">\u9875\u811a&lt;\/div>' });<\/code><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6\ufe0f\u20e3 \u603b\u7ed3<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u573a\u666f<\/th><th>\u63a8\u8350\u65b9\u6848<\/th><th>\u4f18\u7f3a\u70b9<\/th><\/tr><\/thead><tbody><tr><td>\u524d\u7aef\u5355\u9875\u5185\u5bb9\u5bfc\u51fa<\/td><td>jsPDF + html2canvas \/ html2pdf.js<\/td><td>\u7b80\u5355\uff0c\u4f46\u957f\u9875\u9762\u5206\u9875\u590d\u6742<\/td><\/tr><tr><td>\u670d\u52a1\u7aef\u751f\u6210 PDF<\/td><td>Puppeteer \/ Playwright<\/td><td>\u9ad8\u4fdd\u771f\u6e32\u67d3\uff0c\u652f\u6301\u957f\u9875\u9762\u3001\u52a8\u6001 JS<\/td><\/tr><tr><td>\u6587\u672c\/\u56fe\u8868\u751f\u6210<\/td><td>PDFKit<\/td><td>\u53ef\u7ed8\u5236 PDF \u5143\u7d20\uff0cHTML \u8f6c\u6362\u4e0d\u4fbf<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u603b\u7ed3\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u524d\u7aef\u5bfc\u51fa<\/strong>\u9002\u5408\u7528\u6237\u5373\u65f6\u4e0b\u8f7d\u62a5\u8868<\/li>\n\n\n\n<li><strong>\u670d\u52a1\u7aef\u751f\u6210<\/strong>\u9002\u5408\u6279\u91cf\u3001\u81ea\u52a8\u5316\u6216\u9ad8\u4fdd\u771f PDF<\/li>\n<\/ul>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u57fa\u4e8e JavaScript \u7684 HTML \u2192 PDF \u8f6c\u6362&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/24\/%e5%9f%ba%e4%ba%8ejavascript%e5%ae%9e%e7%8e%b0html%e5%88%b0pdf%e7%9a%84%e8%bd%ac%e6%8d%a2%e6%8c%87%e5%8d%97-2\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-928","post","type-post","status-publish","format-standard","hentry","category-12"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=928"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/928\/revisions"}],"predecessor-version":[{"id":929,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/928\/revisions\/929"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}