第一种
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const handlePrint = (isPrint) => {
console.log('pdf');
const targetDom = pdfs.current;
console.log(targetDom);
// 获取节点高度,后面为克隆节点设置高度。
const height = targetDom.height;
// 克隆节点,默认为false,不复制方法属性,为true是全部复制。
const cloneDom = targetDom.cloneNode(true);
// 设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
cloneDom.style.backgroundColor = '#fff';
cloneDom.style.position = 'absolute';
cloneDom.style.top = '0';
cloneDom.style.index = '-1';
cloneDom.style.height = height;
// 将克隆节点动态追加到body后面。
document.getElementById('proposal').appendChild(cloneDom);
// console.log(cloneDom);
// 插件生成base64img图片。
html2canvas(cloneDom, {
dpi: window.devicePixelRatio,
useCORS: true,
// 画布开始渲染的y坐标位置
y: 0,
}).then((canvas) => {
console.log('canvas', canvas);
const contentWidth = canvas.width;
const contentHeight = canvas.height;
console.log(contentHeight);
// 一页pdf显示html页面生成的canvas高度;
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 = (595.28 / contentWidth) * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jsPDF('', 'pt', 'a4');
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
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();
}
}
}
console.log(pdf);
const nowDate = dayjs(new Date()).format('YYYY-MM-DD');
if (isPrint) {
pdf.autoPrint();
pdf.output('dataurlnewwindow');
} else {
pdf.save('boarding-pass-' + nowDate + '.pdf');
}
});
};
第二种
import html2pdf from 'html2pdf.js';
const exportPdf = () => {
if (
imgUrlAplicant &&
imgUrlInsure &&
color1 != 'red' &&
color2 != 'red' &&
color3 != 'red'
) {
// 要导出的dom节点,注意如果使用class控制样式,一定css规则
const element = document.getElementById('proposal');
console.log(222);
// 导出配置
const opt = {
margin: 1,
filename: '特别选择权理财投资申请书',
image: { type: 'jpeg', quality: 0.18 }, // 导出的图片质量和格式
html2canvas: { scale: 2, useCORS: true }, // useCORS很重要,解决文档中图片跨域问题
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
};
if (element) {
console.log(element);
// html2pdf().set(opt).from(element).save(); // 导出
// 下面这个是上传到服务器
const doc = html2pdf().set(opt).from(element);
doc
.toPdf()
.get('pdf')
.then(function (pdfObj) {
const perBlob = pdfObj.output('blob');
const apply = new File([perBlob], `apply-${now}.pdf`, {
type: perBlob.type,
});
upload(apply, '6');
// 这里调用后端接口
});
setUploadState(true);
}
} else {
setUploadState(false);
if (color1 == 'red' || color2 == 'red' || color3 == 'red') {
Toast.fail('请依次点击标红文字');
document.getElementById('confirm')?.scrollIntoView();
} else if (!imgUrlAplicant || !imgUrlInsure) {
Toast.fail('请签名');
}
}
};