import jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';
toExportPDF() {
const targetDom = document.getElementById(ElementID);
const eleW = targetDom.offsetWidth; // 获得该容器的宽
const eleH = targetDom.offsetHeight; // 获得该容器的高
var canvas = document.createElement('canvas');
canvas.width = eleW;
canvas.height = eleH;
canvas.style.width = targetDom.clientWidth + 'px';
canvas.style.height = targetDom.clientHeight + 'px';
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 841.89;
var imgHeight = 595.28;
domtoimage
.toJpeg(targetDom, {
quality: 0.85,
width: eleW,
height: eleH,
scale: 2
})
.then((dataUrl) => {
const pageData = dataUrl;
var pdf = new jsPDF('l', 'pt', 'a4', true);
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfname + '.pdf'); // 这里是导出的文件名
});
},