解决 图片太多截图不全 问题 html2canvas dom-to-image jspdf

首先我需要截图的demo图片很多很多,当我使用html2canvas转的时候总是有一部分没有截上，我上网上找了几个办法，都没有解决，就很狗血无语，， gitlab上好像没有一直没有回复 最后我是使用的dom-to-image插件解决的 搭配jspdf

冲冲冲 顺便问一下 有将页面转为pdf的功能吗 不转为canvas图片 就是直接dom元素和样式生成为pdf 可编辑

不分页

export const downloadPDF = async (ele) => {
  var element = window.document.querySelector(ele); // 这个dom元素是要导出pdf的div容器
  console.log(element);
  if (!element) return;

  const resp = await domtoimage.toPng(element);
  let contentWidth = element.clientWidth;
  let contentHeight = element.clientHeight;

  // 设置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; //内容图片这里不需要留白的距离

  var pdf = new jsPDF("p", "pt", [pdfX, pdfY]);
  // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
  pdf.addImage(resp, "jpeg", 0, 0, imgX, imgY);

  pdf.save(`1111f`);
};

    

分页

export const downloadPDF = async (ele) => {
  var element = window.document.querySelector(ele); // 这个dom元素是要导出pdf的div容器
  console.log(element);
  if (!element) return;

  const resp = await domtoimage.toPng(element);
  let contentWidth = element.clientWidth;
  let contentHeight = element.clientHeight;

  let pageHeight = (contentWidth / 592.28) * 841.89;
  //未生成pdf的html页面高度
  let leftHeight = contentHeight;
  //页面偏移
  let position = 0;
  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
  let imgWidth = 595.28;
  let imgHeight = (592.28 / contentWidth) * contentHeight;
  let pdf = new jsPDF("", "pt", "a4");

  //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
  //当内容未超过pdf一页显示的范围，无需分页
  if (leftHeight < pageHeight) {
    pdf.addImage(resp, "JPEG", 0, 0, imgWidth, imgHeight);
  } else {
    while (leftHeight > 0) {
      pdf.addImage(resp, "JPEG", 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= 841.89;
      //避免添加空白页
      if (leftHeight > 0) {
        pdf.addPage();
      }
    }
  }
  pdf.save('content.pdf');
};