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

Posted 2023-02-24

【中文标题】如何将 HTML 页面转换为 PDF 然后下载？

【英文标题】：How to convert HTML page to PDF then download it?

【发布时间】：2018-02-11 05:11:23

【问题描述】：

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

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

有什么解决办法吗？

【问题讨论】：

Is it possible to save HTML page as PDF using javascript or jquery?的可能重复

【参考方案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)

【讨论】：

我试过了，但它不会按照给定的样式（css）显示

@YashParekh 如果您觉得这个答案有帮助，请不要忘记为未来的用户投票/接受

html2canvas 不适用于带有地图的页面。

【参考方案2】：

下载最新版jsPDF。

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

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