如何将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