2017年7月21日更新
没想到我为实现自己需求写的Demo受到这么多人关注,私信问的比较多。
在这里向大家道歉了,因为这个Demo是有瑕疵的,比如它不支持多页(我的需求只是一页ε=ε=ε=┏(゜ロ゜;)┛),页面拉伸,模糊等问题
为了避免更多人被我误导,建议大佬们参考以下教程文档:
http://rawgit.com/MrRio/jsPDF/master/
这是官方案例,其中有个HTMLRender
案例便是导出多页PDF的最简单的方式var doc = new jsPDF(); // We'll make our own renderer to skip this editor var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; // All units are in the set measurement for the document // This can be changed to "pt" (points), "mm" (Default), "cm", "in" doc.fromHTML($('body').get(0), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers });
https://github.com/linwalker/render-html-to-pdf
这个是结合html2canvas和jspdf导出多页的详细解释demo,写的比我好太多,而且实现逻辑很高明。
下面是我的正文,/(ㄒoㄒ)/~~
好久没在CSDN写博客了,因为都放在了个人网站了哈
我这里有个需求,就是前端添加个按钮,提供HTML页面导出为PDF的功能。
我谷歌了好久(难道是我谷歌的方式不对 (ˉ▽ˉ;)…),找到的答案大都推荐 jsPDF + html2canvas 的方式。
参考了这两个开源项目的文档,自己写,失败,导出的pdf是空的。
参考 stackoverflow 代码,同样失败,同样只导出空白的pdf,他们咋成功了?
好了,以上都是废话,只是说明了我找答案的艰辛之旅。
栗子
准备
创建项目文件夹,npm构建怎样都行,我这里简单直接引入两个库 jspdf 和 html2canvas,大家可以自行下载。
新建HTML页面文件
头部引入刚才所下载的 jspdf
和 html2canvas
,再导入主要的 js 文件例如:
<script src="/js/jspdf.debug.js"></script>
<script src="/js/html2canvas.js"></script>
<script src="/main.js"></script>
页面里面内容自己想怎么写就怎么写啦,提供一个按钮来触发导出pdf的功能,例如:
<button id="btn-html2canvas">export PDF by using jspdf + html2canvas</button>
编辑 main.js
document.getElementById("btn-html2canvas").onclick = function(){
html2canvas(document.getElementById("content"), {
onrendered: function(canvas) {
//通过html2canvas将html渲染成canvas,然后获取图片数据
var imgData = canvas.toDataURL('image/jpeg');
//初始化pdf,设置相应格式
var doc = new jsPDF("p", "mm", "a4");
//这里设置的是a4纸张尺寸
doc.addImage(imgData, 'JPEG', 0, 0,210,297);
//输出保存命名为content的pdf
doc.save('content.pdf');
}
});
}
这里要特别注意
canvas.toDataURL('image/jpeg)
的参数image/jpeg
和doc.addImage(...,'JPEG',...)
的参数JPEG
务必一致
而且,我也建议这两个参数分别写image/jpeg
和JPEG
。
因为其他参数例如image/png
等,导出pdf后内容为空。
这也是困扰了我一天的问题。(我猜测因为html2canvas输出的图片base64数据是image/jpeg格式,如果写其他格式会导致渲染失败)
添加到服务器中浏览器访问,测试html导出为pdf是否成功,总之博主成功了。