vue--打印当前页面为A4形式的pdf文件,分页(问题:页面如果有图片可能会被截开)
页面直接调用该刚发即可(“#subOutputRank“页面的dom节点)printOut22() {var title = this.teacher;var that = this;html2Canvas(document.querySelector("#subOutputRank"), {allowTaint: true}).then(function(ca
·
1、npm 安装
npm install jspdf --save
npm install --save html2canvas
2、在需要打印的页面导入
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
3、页面直接调用该方法即可(“#subOutputRank“页面的dom节点)
printOut22() {
var title = this.teacher;
var that = this;
html2Canvas(document.querySelector("#subOutputRank"), {
allowTaint: true
}).then(function(canvas) {
console.log( canvas.height);
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = contentWidth / 592.28 * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
let imgHeight = 592.28 / contentWidth * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let 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 -= 842;
if (leftHeight > 0) {
PDF.addPage();
}
}
}
PDF.save(title + ".pdf");
that.dianpingShow = true;
});
},
更多推荐
已为社区贡献11条内容
所有评论(0)