这里我们需要用到 html2canvas 和 jspdf 先安装一下依赖。
npm install html2canvas
npm install jspdf下面是具体的实现方法，切记，把打印的内容写在容器里。document.getElementById("pdfContent");
这里PDF打印的按钮如果在div内部的话可以CSS脱离一下文档流就不会打印到了。
this.getPdf("AuditReport") AuditReport 更换成自己需要打印出来的名字即可。
<div class="auditReport pdfContent" id="pdfContent" ref="pdfContent">
<el-button
refs="transfPDF"
class="pdfButton"
type="primary"
size="mini"
style="height: 30px;right:20px"
@click="handleTransfPDF"
>PDF下载</el-button>
</div>
//这里记得引入一下
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
//打印调用的方法，
handleTransfPDF() {
this.getPdf("AuditReport", true).then(res => {
// console.log(res, 'download')
if (res) {
console.log("上传");
//成功后的回调
} else {
console.log("不上传");
}
});
},
//具体打印方法。
getPdf(pdfFileName, isDownload, hide) {
let that = this;
return new Promise((resolve, reject) => {
that.$XModal.message({
message: "正在下载！",
status: "loading"
});
let ele = document.getElementById("pdfContent");
pdfFileName = pdfFileName || "pdf";
//截图必须要滚动条指定
window.pageYoffset = 0; // 滚动置顶
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
ele.scrollTop = 0; // 滚动置顶
html2canvas(ele, {
allowTaint: true,
windowWidth: ele.scrollWidth,
windowHeight: ele.scrollHeight
// windowWidth: ele.offsetWidth, // 使用 offsetWidth 而不是 scrollWidth
// windowHeight: ele.offsetHeight
}).then(canvas => {
// const _this = this
// 未生成pdf的html页面高度
var leftHeight = canvas.height;
var a4Width = 575.28; // 原A4宽 592 因为要设置边距 10 ,这里要减掉 20
var a4Height = 821.89; // 原A4高 841 因为要设置边距 10 ,这里要减掉 20
// 一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);
// pdf页面偏移
var position = 0;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF("x", "pt", "a4");
// let printIndex = 1
const canvas1 = document.createElement("canvas");
let height;
pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
function createImpl(canvas) {
if (leftHeight > 0) {
var checkCount = 0;
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef;
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true;
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext("2d").getImageData(j, i, 1, 1)
.data;
if (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {
isWrite = false;
break;
}
}
if (isWrite) {
checkCount++;
if (checkCount >= 10) {
break;
}
} else {
checkCount = 0;
}
}
height =
Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
if (height <= 0) {
height = a4HeightRef;
}
} else {
height = leftHeight;
}
canvas1.width = canvas.width;
canvas1.height = height;
// console.log(index, 'height:', height, 'pos', position);
var ctx = canvas1.getContext("2d");
ctx.drawImage(
canvas,
0,
position,
canvas.width,
height,
0,
0,
canvas.width,
height
);
if (position !== 0) {
pdf.addPage();
}
// 设置 10px 边距
pdf.addImage(
canvas1.toDataURL("image/jpeg", 1.0),
"JPEG",
0,
10,
a4Width,
(a4Width / canvas1.width) * height
);
leftHeight -= height;
position += height;
if (leftHeight > 0) {
setTimeout(createImpl, 0, canvas);
} else {
pdf.save(pdfFileName + ".pdf");
setTimeout(hide, 0);
if (isDownload) {
var pdfData = pdf.output("datauristring"); //获取base64Pdf
resolve(pdfData);
}
that.$XModal.message({
message: "下载完成",
status: "success"
});
}
}
}
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(
pageData,
"JPEG",
10,
10,
a4Width,
(a4Width / canvas.width) * leftHeight
);
pdf.save(pdfFileName + ".pdf");
that.$XModal.message({
message: "下载完成",
status: "success"
});
if (isDownload) {
var pdfData = pdf.output("datauristring"); //获取base64Pdf
resolve(pdfData);
}
} else {
try {
pdf.deletePage(0);
setTimeout(createImpl, 0, canvas);
} catch (err) {
console.log(err);
}
}
});
});
}
写到这里遇到一个坑，就是设置的文字样式打印出来有问题，设置一下字体和间距就行。
font-family: "Microsoft YaHei", sans-serif;
letter-spacing: 0.01px;
打印出来还是很清晰的。ps：中间打了码。
