html2canvas+jspdf转pdf中遇到的坑
项目背景 :{“vue”: “3.0.11”,,“jspdf”: “^2.4.0”, “html2canvas”: “^1.3.2”},,新增了html转pdf 需求。
像往常一样 百度->copy->完成,但是今天这个有点问题,就是pdf生成出来的时候总是少了一半。
然后就各种百度查看相似的问题,基本千篇一律,感觉都是一个人发的,然后其他人疯狂的copy转载。。。
后来实在没招了,就硬着头皮看了下源码,最后不知道怎么机缘巧合之下就试出来了,
const downloadPDF = () => {
const dataStatistics = document.getElementById('dataStatistics') as HTMLElement;
// 源码里面多减的宽高
const height = dataStatistics.scrollHeight + 180;
const width = dataStatistics.scrollWidth + 85;
const params = {
windowWidth: width,//问题跟这里的宽高有关
windowHeight: height,//问题跟这里的宽高有关
};
nextTick(() => {
html2canvas(dataStatistics, params).then((canvas) => {
const imgWidth = 1280;//问题跟这里的宽高有关
const imgHeight = canvas.height;//问题跟这里的宽高有关
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new JsPDF.jsPDF('p', 'pt', [imgWidth, imgHeight]);
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
pdf.save('xxxx.pdf');
});
});
};
其他属性的解释百度上一大堆哈,有懂行的大佬麻烦指教一下。