<div ref="myContainer" id="fatherWidh">
<el-table
id="factTable">
...
</el-table>
</div>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
handleExport(id) {
this.generatePDF(this.$refs.myContainer, "排班统计表");
},
generatePDF(el, name) {
let parent = el.offsetParent;
let grandParent = parent.offsetParent;
let left = grandParent.offsetLeft + parent.offsetLeft + el.offsetLeft;
let top = grandParent.offsetTop + parent.offsetTop + el.offsetTop;
let tableWidth = document.querySelector(
"#factTable .el-table__body-wrapper"
);
// factTable 是我在 el-table 上指定的 id
// .el-table__body-wrapper 是组件自动生成的带滚动条的 div 上的 class (需要在浏览器的开发者工具中查找)
// 重要:设置表格父节点的宽度,最后再把宽度恢复成100%
document.getElementById(
"fatherWidh"
).style.width = `${tableWidth.scrollWidth}px`;
console.log("-----", tableWidth.scrollWidth);
html2canvas(el, {
// x: left,
// y: top,
/// here!!!!!!! ///
width: tableWidth.scrollWidth + 60, // 为了使横向滚动条的内容全部展示,这里必须指定!!
// 注意id需在html代码中指定。
// eg:html某div中指定了‘id="myDiv"’,此处写为‘getElementById("myDiv")’,则pdf以myDiv的宽度为准
}).then((canvas) => {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
// eslint-disable-next-line no-extra-parens
let pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
// eslint-disable-next-line no-extra-parens
let imgHeight = (592.28 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let pdf = new jsPDF("", "pt", "a4");
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 5, 30, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
//添加新页
pdf.addPage();
}
}
}
pdf.save(`${name}.pdf`);
document.getElementById("fatherWidh").style.width = `${100}%`;
});
},
参考:https://blog.csdn.net/Bule_daze/article/details/111244892?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-111244892-blog-125203111.pc_relevant_multi_platform_whitelistv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-111244892-blog-125203111.pc_relevant_multi_platform_whitelistv2&utm_relevant_index=1