使用插件：jspdf + html2canvas，html2canvas将节点绘制成图片，然后jspdf再导出。
优点：可以指定导出DOM，配置贼简单（其实浏览器右键-->打印-->另存为pdf文件也挺方便哒，但是很多人不知道呀）。
引入js文件（快夸我，别人都是让你们自己去网上找，给的本地文件引用地址）：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>如果想将上面的文件弄成本地的，直接点击地址访问，然后单击右键另存为就好啦。
html信息：
导出按钮
<button onclick="ExportPDF('echartsCavans')">导出</button>
导出DOM
<div id="echartsCavans" ref="echartsCavans" class="layui-form">
......
</div>接下来是打印方法：
function ExportPDF(id) {
// api.openLoad();
layer.open({type:3,icon:2});//mask遮罩层开启，没有使用layui的可以去掉
html2canvas( $("#"+ id), {
allowTaint: true,//允许跨域
height: $("#"+ id).scrollHeight,//
width:$("#"+ id).scrollWidth,//为了使横向滚动条的内容全部展示，这里必须指定
background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 595.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 555.28;
var imgHeight = 555.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
console.log("生成图片");
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
// api.closeLoad();
layer.close(layer.index);//关闭遮罩层
pdf.save( '趋势报表.pdf');
}
})
}
---------------------------------------------------------------------------------------------------------------------------
按上面的代码基本不会有问题，但是我踩过两个坑（建议先看第二个坑），简单说下。
html2canvas这个函数的第一个参数需要注意。如果报错，说Element is not attached to a Document。替换掉压缩文件（我之前引用的是min.js文件，上面给的引用地址已经是源文件啦），换成源文件。报错原因：7605行报错节点没有ownerDocument属性。引入文件是在官网下载的1.3.3版本，然后jquery是使用的layui.jquery，将$获取节点方式换成document.getElementById就好啦，即上面导出方法html2canvas函数第一个参数由“$("#"+ id)”变成document.getElementById(id)。
第二个坑：onrendered函数不执行，使用了遮罩层，4分钟还没有导出成功，然后我就觉得不对劲儿了。果然，onrendered函数没有执行。原因不详，但是解决方案就是换版本，换成我在文章中引入的文件就好了（这个文件一换，还把第一个坑给填好了）
---------------------------------------------------------------------------------------------------------------------------
另外一个问题，页面滚动到导出节点下方时，导出的pdf不完整。暂时给的解决方案：点击导出按钮时，将滚动条置顶再导出（我懒）。在html2canvas函数前加上这三行代码
// 导出前将滚动条置顶，不然截图不全
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;