html页面导出为pdf(jsPDF、iText、wkhtmltopdf)


html页面导出pdf,本来是一件很简单的事情,在浏览器直接打印(Mac快捷键为⌘+p;Windows快捷键为ctrl+p),就可以把页面另存为pdf文件,但对于要经常把页面导出为pdf的用户来说并不友好,一个合格程序员的标准就是:做出来的软件猪都要会用,否则你就是猪。

调研了几种html导出pdf的实现方式,这里把要点记录下来分享下。

调研对象 优点 缺点 分页 图片 表格 链接 中文 特殊字符、样式 导出样例 备注
jsPDF 1、整个过程在客户端执行(不需要服务器参与),调用简单 1、生成的pdf为图片形式,且内容失真 支持 支持 支持 不支持 支持 支持
iText 1、功能基本可以实现,比较灵活2、生成pdf质量较高 1、对html标签严;格,少一个结束标签就会报错;2、后端实现复杂,服务器需要安装字体;3、图片渲染比较复杂(暂时还没解决) 支持 支持 支持 支持 支持 支持
wkhtmltopdf 1、调用方式简单(只需执行一行脚本);2、生成pdf质量较高 1、服务器需要安装wkhtmltopdf环境;2、根据网址生成pdf,对于有权限控制的页面需要在拦截器进行处理 支持 支持 支持 支持 支持 支持

上面三种是着重调研的三种方式,下面进行简单介绍。


一、html2canvas+jsPDF


这种方式的原理是利用html2canvas遍历页面中的dom节点,渲染成canvas image,再用jsPDF把canvas image转化为pdf,最后转化的pdf的内容都是图片形式,类似于把整个网页截图、切割,再一页一页拼接成一个完整的pdf。

代码样例
html:

<button id="exportToPdf">导出为PDFbutton>
<div id="export_content">
    这里是要导出为pdf中的内容
div>

javascript(需要依赖jspdf和html2canvas相关js):


                    
                    

你可能感兴趣的:(--------【,项,目,实,战,】)