如何将 HTML 页面转换为 PDF 然后下载？

Question

这是我用 HTML 和 CSS 设计的网页：

如何下​​载与 PDF 相同的网页？我尝试了很多解决方案，但我只获得了 PDF 文件的内容，而不是 CSS 样式。

有什么解决办法吗？

Answer 1

正如this post 中所述，您可以使用jsPDF 库来执行此操作。

确保在您的文件中同时包含 jQuery 和 jsPDF。

还可以通过html2canvasJS 将文档元素转换为画布以修复 CSS。

JS：

let doc = new jsPDF('p','pt','a4');

doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="content">
  <h1 style="color:red">Hello World</h1>
  <p>this is a PDF</p>
</div>

演示： JSFiddle

您也可以通过按钮触发下载 (see initial post for details)

Answer 2

1. 下载最新版jsPDF。

2. 在您的项目中包含以下脚本：

   • jspdf.js
   • jspdf.plugin.from_html.js
   • jspdf.plugin.split_text_to_size.js
   • jspdf.plugin.standard_fonts_metrics.js