推广

H5基于canvas实现电子签名并生成PDF文档

iseeyu3年前 (2024-02-21)推广145

Touch.png

clientX/clientY: 触摸位置距离当前body可视区域的x,y坐标;
pageX/pageY: 对于整个页面来说，触摸位置距离body左上角的x,y坐标，包括被scrollTop和scrollLeft的值；
screenX/screenY: 触摸位置距离显示器左边和顶部的x,y距离。
所以，在获取结束点坐标的时候，如果当前页面没有出现滚动条，使用clientY和pageY计算差别不大，如果页面比较长，出现了滚动条，那么就必须要使用pageY来计算。clientX同理，但是移动端通常横向滚动的场景不多，所以用clientX来计算即可。

在签名（touchmove）这个动作过程中，我们需要不断的更新起点位置，否则画出来是这样

touchmove.png

其实这个原理和微积分很相似，线段本质上就是由无穷多个小线段组成，宏观一点来看可以把线段当成一个个长度很小的小线段首尾相连构成。所以我一直觉得编程编到最后就是考验一个人的数学能力，交并集、逻辑思维、算法等都能看到数学的身影。

生成PDF文档

html2canvas是一款将HTML代码转换成Canvas的插件，因此需要用一个div包裹住需要打印的内容区域，获得这个dom节点。

html2Canvas(dom, {
    allowTaint: true,
    width: dom.offsetWidth, //设置获取到的canvas宽度
    height: dom.offsetHeight, //设置获取到的canvas高度
    x: 0, //页面在水平方向滚动的距离
    y: 0, //页面在垂直方向滚动的距离
   })

注意：此处需要设置width和height及x,y，否则当页面内容只有一页的时候没有问题，但是若页面内容有很多页的时候，就会出现生成的图片只有一小部分有内容的现象。问题就出现在这个配置参数上，若没有设置宽高，则默认只取当前视口的内容，丢弃掉其他超出当前视口的内容。
设置打印参数：

const print = () => {
    let dom: HTMLElement = pdfDom.current;
    html2Canvas(dom, {
      allowTaint: true,
      width: dom.offsetWidth, //设置获取到的canvas宽度
      height: dom.offsetHeight, //设置获取到的canvas高度
      x: 0, //页面在水平方向滚动的距离
      y: 0, //页面在垂直方向滚动的距离
    }).then((canvas: HTMLCanvasElement) => {
      let canvasWidth = canvas.width;
      let canvasHeight = canvas.height;
      let pageHeight = (canvasWidth / 592.28) * 841.89; // 一页A4 pdf能显示的canvas高度
      let imgWidth = 595.28; // 设置图片宽度和A4纸宽度相等
      let imgHeight = (592.28 / canvasWidth) * canvasHeight;//等比例换算成A4纸的高度
      let totalHeight = imgHeight; // 需要打印的图片总高度，初始状态和图片高度相等
      let pageData = canvas.toDataURL('image/png', 1.0);
      let PDF = new JsPDF('p', 'pt', 'a4', true);
      if (totalHeight < pageHeight) { //
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); // 从顶部开始打印
      } else {
        let top = 0;   // 打印初始区域
        while (totalHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 0, top, imgWidth, imgHeight);  // 从图片顶部往下top位置开始打印
          totalHeight -= pageHeight;
          top -= 841.89;
          if (totalHeight > 0) {
            PDF.addPage();
          }
        }
      }
      PDF.save('test.pdf');
    });
  };

选择分页位置

按照上述步骤生成了一份PDF文档，但是当PDF页数有很多的时候，会有这样的问题

pdf.png

可以看到，分页的时候从这段文字这里懒腰截断了。这显然不是我们想要看到的效果，如何解决这个问题呢？

PDF文档页数较少的情况
可以在开发测试的时候预先在将要分页的地方插入一个padding，就是提前预留分页位置
PDF文档页数较多

对于这种情况，笔者尝试遍历要打印的dom节点的子节点，将每一页所能打印的dom节点高度累加，若超过了页面所能承载的最大高度，则将最后一个节点增加padding，打印完毕将样式还原。这种方法因为要计算每个dom节点的高度，非常耗性能，也要求页面dom元素的颗粒度较细，否则会出现一个页面有大块空白，完全无法模拟出word生成pdf的那种效果，所以就不展开讨论了。这里也有个参考关于pd分页stackoverflow.com

源码地址