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

Question

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

我怎样才能下载相同的网页为PDF？我尝试了很多解决方案，但我只获取PDF文件中的内容，但没有使用CSS样式。

任何解决方案？

Answer 1

1. 下载的jsPDF最新版本。

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

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

Answer 2

由于在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）