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

Question

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

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

有什么解决办法吗？

Answer 1

如 this post 中所述你可以使用jsPDF图书馆来做到这一点。

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

同时获得 html2canvasJS将文档元素转换为 Canvas 以修复 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 ) 触发下载