导出PDF的两种方法

Znyoung

一、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