vue中页面导出为pdf
【代码】vue中页面导出为pdf。
·
需要用到html2canvas,JsPDF这2个插件
yarn add html2canvas jspdf
const loading = this.$loading({
lock: true,
text: "正在生成PDF文件...",
spinner: "el-icon-loading",
background: "hsla(0,0%,100%,.9)",
});
const html = document.getElementById("container"); //需要导出的标签页
this.savePdf(
html,
loading,
`文件名.pdf`
);
savePdf
savePdf(el, loading, title) {
html2canvas(el, {
useCORS: true,
allowTaint: true,
})
.then((canvas) => {
// 内容的宽度
const contentWidth = canvas.width;
// 内容高度
const contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
const pageHeight = (contentWidth / 592.28) * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = (592.28 / contentWidth) * contentHeight;
// canvas转图片数据
const pageData = canvas.toDataURL("image/jpeg", 1.0);
// 新建JsPDF对象
const 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");
})
.catch(() => {})
.finally(() => {
loading.close();
});
},
更多推荐
已为社区贡献8条内容
所有评论(0)