html2canvas+jspdf 图片很多 截图显示不全

新手上路,请多包涵
    就很无语 时好时坏
    ```
    export const downloadPDF = (ele) => {
      var element: any = window.document.querySelector(ele); // 这个dom元素是要导出pdf的div容器
      if (!element) return;
        const options = {
        allowTaint: true,
        height: element.scrollHeight,
        windowHeight: element.scrollHeight,
        useCORS: true,
      };
      html2canvas(element, options).then(function (canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        console.log("contentWidth", contentWidth);
        console.log("contentHeight", contentHeight);
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
    
        // 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
        // 2为上面的scale 缩放了2倍
        var pdfX = ((contentWidth + 10) / 2) * 0.75;
        var pdfY = ((contentHeight + 500) / 2) * 0.75; // 500为底部留白
    
        // 设置内容图片的尺寸,img是pt单位
        var imgX = pdfX;
        var imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离
    
        // 初始化jspdf 第一个参数方向:默认''时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小,单位是pt
        var pdf = new jsPDF("p", "pt", [pdfX, pdfY]);
        // 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0
        pdf.addImage(pageData, "jpeg", 0, 0, imgX, imgY);
        pdf.save(`11.pdf`);
        message.success({
          content: "报告生成成功",
          key: 11,
        });
      });
    };
            
      ```
阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进