1.首先創(chuàng)建js文件exportPdf.js,且需要安裝html2canvas和jspdf兩個插件裙秋；
然后將在你需要導出的頁面中執(zhí)行方法，
this.getPdf("html", "報表");
//參數(shù)一：導出范圍的id
//參數(shù)二：導出pdf文件的名稱
下面是導出的主要代碼磨镶；我在網(wǎng)上查找了大量的代碼才寫出了這個惋鹅，其他的代碼都是很淺顯，雖然也可以導出絮缅，但是一旦數(shù)據(jù)量過大，頁面較長導出的pdf文件便會白屏呼股；此文件解決了此問題，但是因為導出的pdf做了分頁画恰，而pdf又是由圖片轉(zhuǎn)換而來彭谁，所以分頁中會有截斷的問題，暫未解決允扇，希望大家可以指點缠局。
/* 導出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"), //創(chuàng)建一個canvas節(jié)點
scale = 1; //定義任意放大倍數(shù) 支持小數(shù)
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 參數(shù)
canvas: canvas, //自定義 canvas
logging: false, //日志開關，便于查看html2canvas的內(nèi)部執(zhí)行流程
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會有偏移唱矛。
