头图

解决 图片太多截图不全 问题 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');
};

阅读 800
2 声望
0 粉丝
0 条评论
你知道吗?

2 声望
0 粉丝
文章目录
宣传栏