const handlePrint = (id: any, isPrint: any) => {
const dom: HTMLElement | null = document.getElementById(id);
// let targetDom: any = pdfs.current;
// 获取节点高度,后面为克隆节点设置高度。
// let height = targetDom?.height;
// // 克隆节点,默认为false,不复制方法属性,为true是全部复制。
// let cloneDom = targetDom?.cloneNode(true);
// // 设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
// cloneDom.style.backgroundColor = 'red';
// cloneDom.style.position = 'absolute';
// = '0px';
// cloneDom.style.index = '-1';
// cloneDom.style.height = height;
// // 将克隆节点动态追加到body后面。
// document.getElementById('pdf-con')?.appendChild(cloneDom);
// 插件生成base64img图片。
html2canvas(dom as HTMLElement, {
useCORS: true,
// 画布开始渲染的y坐标位置
y: 0
}).then((canvas) => {
// console.log('canvas', canvas);
let contentWidth = canvas.width;
let contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度;
let pageHeight = (contentWidth / 700) * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 700;
let imgHeight = (700 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new JsPDF(undefined, 'pt', 'a4');
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
console.log(pageHeight,leftHeight,imgWidth,imgHeight,"less")
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();
}
}
}
let nowDate = moment(new Date()).format('YYYY-MM-DD');
if (isPrint) {
//打印
pdf.autoPrint();
pdf.output('dataurlnewwindow');
setLoading(false)
} else {
//下载
pdf.save('发货单-' + nowDate + '.pdf');
setLoading(false)
}
});
};