导出PDF的两种方法
一、html2canvas配合jsPdf导出PDF文件
- 优点： 该方案可以直接在用户本地生成PDF文件导出，无需经过服务器后台生成。
- 缺点： 生成的PDF文件里的文字无法直接复制使用。
- 处理方法：
- html2canvas基于DOM，可以在用户浏览器上根据页面上可用的HTML信息构建并生成图片。
- jsPdf通过生成一个PDF文档，并将html2canvas生成的图片插入到PDF文件中进行导出。
- JS组件
- JS代码示例
- html2canvas里第一个参数就是需要导出PDF的父级元素。ps：使用jquery选择器会报错。
- 第二个参数中可以设置生成图片的一些参数，具体参考官方文档：http://html2canvas.hertzen.com/configuration
function exportPdf1() {
html2canvas(document.querySelector("#preOrderInfo"),{
allowTaint: true,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
scale: 4 //设置用于渲染的比例，越高生成的图片越清晰
}).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg', 1.0);
var img = new Image();
img.src = imgData;
//根据图片的尺寸设置pdf的规格，要在图片加载成功时执行
img.onload = function () {
//此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
if (this.width > this.height) {
var doc = new jsPDF('l', 'mm', [this.width, this.height]);
} else {
var doc = new jsPDF('p', 'mm', [this.width, this.height]);
}
doc.addImage(imgData, 'jpeg', 0, 0, this.width, this.height);
//根据下载保存成不同的文件名
doc.save('客户【' + $("#custName").text() + '】的预订单信息' + $("#orderCode").text() + '.pdf');
};
});
}
二、使用wkhtmltopdf导出PDF
- 优点： 根据原生HTML导出的PDF可以对文字进行复制，无需额外写模版、查数据库填充数据等操作。
- 缺点： 涉及服务器后台操作
- 处理方法：
wkhtmltopdf和wkhtmltoimage是开源 (LGPLv3) 命令行工具，可使用 Qt WebKit 渲染引擎将 HTML 渲染为 PDF 和各种图像格式。
后台：
- 拿到前台传入的存有HTML代码的字符串，生成一个HTML文件，将所有HTML代码追加到这个HTML文件中。
再通过Java方法执行主机系统中的wkhtmltopdf工具，将HTML文件转为PDF文档。
通过输出流返回文档数据。
命令行执行示例：
# wkhtmltopdf HTML文档位置 生成PDF文档位置
前台：
获取到需要的所有元素，设置拼接成完整的HTML页面。
若用到了公共css，可以通过
<link rel='stylesheet' href='common.css'>插入到<head>标签中，然后将公共的css放到生成html的同一文件夹下。拼接HTML的字符编码方式：
<meta http-equiv='content-type' content='text/html;charset=utf-8'>若有独立的style样式也要拼接。
- 参考接口：/uop/yys/v1/cust/html2pdf
- 参考帖子：http://eip.teamshub.com/t/5242285