jsPDF+html2canvas实现页面多图导出pdf

需求分析

pm提了这么个需求：想要将页面上的四个echarts表导出到一个pdf中。

安装：

npm yarn 随你 分别安装这两个插件

1. “html2canvas”: “^1.4.1”
2. “jspdf”: “^2.5.1”

html2canvas：官网地址

一. 用途： 可以使用html2canvas在H5端生成分享图，将DOM元素转换为图片
二. 用法：

import html2canvas from 'html2canvas';

//此处的id就是需要被截图的那个dom元素 这个需求只需要将4个echarts表放入这个dom中 便可截取到所需的4个表
html2canvas(id, {
      useCORS: true, // 开启跨域配置
      scale: 1,//缩放比例
      allowTaint: true, // 允许跨域图片
    }).then(canvas=>{
      //通过canvas.toDataURL 拿到base64格式的图片
      const imgData = canvas.toDataURL('image/png', 1.0);
      //图片拿到了 后续就是导出pdf了
    })

jsPdf：gihub地址

一. 用途：
1、图像处理：可以将图像添加到PDF文档中，支持常见的图像格式如JPEG、PNG和GIF。
2、页面设置：可以设置页面大小、方向和边距，还可以添加页眉和页脚。
3、导出和保存：可以将生成的PDF文档导出为文件，或者将其以Base64编码的形式保存。
二. 用法：

import jsPDF from 'jspdf';

 const pdf = new jsPDF({
        orientation: 'portrait',// 文档方向，'portrait' 或 'landscape'。
        unit: 'mm',// 文档单位，"pt" | "px" | "in" | "mm" | "cm" | "ex" | "em" | "pc";
        format: 'a4',// 文档尺寸，210mm * 297mm
        compress: true,// 是否压缩PDF文件
        userUnit: 1.0,//自定义用户单位（单位以pt为单位）
      });
      //imgData 就是html2canvas生成的图片
      // x、y：从页面左上角开始的偏移量
      //              图片   类型   x   y   w    h
      pdf.addImage(imgData, 'PNG', 10, 10, 190, 90);
      pdf.addPage();//新增一页
      pdf.addImage(imgData, 'PNG', 0, 0, 100, 50);
      pdf.addImage(imgData, 'PNG', 110, 0, 100, 50); 
      pdf.save('output.pdf');//生成pdf并执行下载

需要关注的点在于unit参数和format参数的配合使用，我这里format生成的一页是4a纸大小 210mm * 297mm，当unit参数使用的单位为mm时页面最大宽度就是210mm，如果要一行展示2张图，那么就需要各设置w为105，否则超出部分会被裁剪。设置高和设置宽同理

根据上面的方法就能得到各种布局的pdf啦