html2canvas+jspdf转pdf中遇到的坑

最新推荐文章于 2024-01-31 15:29:10 发布

原创

最新推荐文章于 2024-01-31 15:29:10 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5

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.t