1.起首创建js文件exportPdf.js,且必要安装html2canvas和jspdf两个插件；
然后将在你必要导出的页面中实行方法，
this.getPdf("html", "报表");//参数一：导出范围的id//参数二：导出pdf文件的名称下面是导出的紧张代码；我在网上查找了大量的代码才写出了这个，其他的代码都是很浅近，虽然也可以导出，但是一旦数据量过大，页面较长导出的pdf文件便会白屏；此文件办理了此标题，但是因为导出的pdf做了分页，而pdf又是由图片转换而来，以是分页中会有截断的标题，暂未办理，渴望各人可以辅导。
/* 导出pdf文档 */import html2Canvas from "html2canvas";import JsPDF from "jspdf";export default { install(Vue, options) { Vue.prototype.getPdf = function (id, title) { const loading = Vue.prototype.$loading({ fullscreen: true, lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); let shareContent = document.getElementById(id), //必要截图的包裹的（原生的）DOM 对象 width = shareContent.clientWidth, //获取dom 宽度 height = shareContent.clientHeight, //获取dom 高度 canvas = document.createElement("canvas"), //创建一个canvas节点 scale = 1; //界说任意放大倍数 支持小数 canvas.width = width * scale; //界说canvas 宽度 * 缩放 canvas.height = height * scale; //界说canvas高度 *缩放 canvas.style.width = shareContent.clientWidth * scale + "px"; canvas.style.height = shareContent.clientHeight * scale + "px"; canvas.getContext("2d").scale(scale, scale); //获取context,设置scale let opts = { scale: scale, // 添加的scale 参数 canvas: canvas, //自界说 canvas logging: false, //日志开关，便于检察html2canvas的内部实行流程 width: width, //dom 原始宽度 height: height, useCORS: true, // 【紧张】开启跨域设置 } html2Canvas(shareContent, opts).then(() => { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf表现html页面天生的canvas高度; var pageHeight = (contentWidth / 592.28) * 841.89; //未天生pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89]，html页面天生的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = (592.28 / contentWidth) * contentHeight; var pageData = canvas.toDataURL("image/jpeg", 1.0); var PDF = new JsPDF("", "pt", "a4"); if (leftHeight < pageHeight) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; if (leftHeight > 0) { PDF.addPage(); } } } PDF.save(title + ".pdf"); // 这里是导出的文件名 loading.close(); this.$router.go(-1) }); }; }};留意：打印的时间，父级或者父级之上的元素的css设置不能有transform，否则在火狐欣赏器中，打印出来的pdf会有偏移。 |
