<template>
<div class="pdfWrap">
<el-button type="primary" @click="exportPdf" :loading="loading"
>下载合同</el-button
>
<div id="pdfDom">
<div class="contentWrapper">
<div class="title">这是文字内容</div>
<br />
<div class="title">这里你可以随意写内容</div>
<div>注意 如果出现分页有遮挡问题 在有遮挡的位置设置个下边距即可,例如这里下方加了个p标签</div>
<p class="pageSplit"></p>
</div>
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
data() {
return {
loading: false,
};
},
methods: {
// 合同内容下载为pdf
exportPdf() {
this.loading = true;
// target 为需要导出PDF的DOM元素
const targetDom = document.querySelector("#pdfDom"); // 这个dom元素是要导出pdf的div容器
var clonedNode = targetDom.cloneNode(true); //克隆元素解决滚动区域问题
clonedNode.setAttribute(
"style",
`width: ${targetDom.width};height: ${targetDom.scrollHeight}px;`
); // 克隆元素的高度设置为可滚动的高度
document.body.appendChild(clonedNode); //放到body后面
html2canvas(clonedNode, {
allowTaint: true,
useCORS: true, // 如果说所生成的页面中带有跨域的图片,这个useCors需要设置为True 否则画布被污染不会显示
backgroundColor: "#fff",
scale: 2,
}).then((canvas) => {
const pdf = new jsPDF("p", "mm", "a4"); // A4纸,纵向
let ctx = canvas.getContext("2d"),
a4w = 170,
a4h = 257, // A4大小,210mm x 297mm,保留左右20mm边距 上下20mm的边距,显示区域170x257
imgHeight = Math.floor(a4h * (canvas.width / a4w)), //按A4显示比例换算一页图像的像素高度
// 已生成pdf的html页面高度
renderedHeight = 0;
while (renderedHeight < canvas.height) {
const page = document.createElement("canvas");
const pageHeight = Math.min(
imgHeight,
canvas.height - renderedHeight
); //可能内容不足一页
page.width = canvas.width;
page.height = pageHeight;
//用getImageData剪裁指定区域,并画到前面创建的canvas对象中
page
.getContext("2d")
.putImageData(
ctx.getImageData(0, renderedHeight, canvas.width, pageHeight),
0,
0
);
pdf.addImage(
page.toDataURL("image/jpeg", 1.0),
"JPEG",
20,
20,
a4w,
Math.min(a4h, (a4w * page.height) / page.width)
); // 添加图像到页面,保留左右20mm边距 上下30mm
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容,添加一个空页
}
const today = new Date().toLocaleDateString().replace(/\//g, "-");
// 本地下载
pdf.save(`下载文件名称${today}.pdf`, pdf);
document.body.removeChild(clonedNode); //最后记得移除截图时添加的
this.loading = false;
});
},
},
};
</script>
<style scoped lang="scss">
.pageSplit {
margin-bottom: 20px;
display: block;
}
div {
font-weight: inherit;
}
#pdfDom {
/* 高度设置为0,使下载内容不可见隐藏 */
height: 0px;
width: 650px;
overflow: auto;
text-align: left;
}
.contentWrapper {
font-size: 16px;
line-height: 2;
.title {
font-size: 22px;
font-weight: 700;
text-align: center;
}
.subTitle {
font-size: 18px;
font-weight: 700;
margin: 15px 0px;
}
p {
text-indent: 2em;
}
.footer{
display: flex;
justify-content: space-between;
margin-top: 40px;
& > div {
width: 50%;
}
}
}
</style>
首先确保安装了html2canvas和jspdf