前端 html导出img或导出pdf

概述：jsPDF配合html2canvas可以将html转化为canvas，然后将canvas转为图片，最后使用jspdf将图片放到pdf中去，实现前端的pdf下载。

整体思路：

1. 安装需要的依赖 html2canvas和jsPDF并导入
2. 获取dom
3. 使用htmlcanvas将dom转换为canvas
4. 获取canvas的宽度、高度(稍微大一点)
5. 实例化一个pdf 并将pdf的宽高设置为canvas的宽高
6. 将canvas转为图片
7. 将内容图片放在pdf中 调用pdf.save 设置pdf 名称并下载

具体步骤：

1. 打开终端, 执行以下命令安装html2canvas和jsPDF

	npm install html2canvas jspdf --save

2. 在需要的页面导入 html2canvas和jsPDF模块

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

3. 核心代码

download() {
      const ref = this.$refs.contentRef // 截图区域
      let canvasScale = 2 //  生成的canvas越大 导出的pdf还原比例后越清晰
      html2canvas(ref, {
        backgroundColor: '#fff',
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        // scale: 0.5
        scale: canvasScale,
      }).then((canvas) => {
        // 导出为一整张pdf
        this.loadOnePagePdf(canvas, canvasScale)
        // 导出为多页pdf
        this.loadPagingPdf(canvas)
        // 导出图片
        this.loadImg(canvas)
      })
    },
    // 导出为一整张pdf
    loadOnePagePdf(canvas, canvasScale) {
      let contentWidth = canvas.width
      let contentHeight = canvas.height
      let pageData = canvas.toDataURL('image/jpeg', 1.0)
      // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
      let pdfX = (contentWidth + 10) / canvasScale * 0.75
      let pdfY = (contentHeight + 10) / canvasScale * 0.75 // 500为底部留白
      let pdf = new JsPDF('', 'pt', [pdfX, pdfY])
      let imgX = pdfX;

      let imgY = (contentHeight / canvasScale * 0.75); //内容图片这里不需要留白的距离
      pdf.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
      pdf.save("xxxxx.pdf");
    },
    // 导出为多页pdf
    loadPagingPdf(canvas) {
      let pdf = new JsPDF("p", "mm", "a4"); //A4纸，纵向
      let ctx = canvas.getContext("2d"),
        a4w = 210,
        a4h = 297, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
        renderedHeight = 0;

      while (renderedHeight < canvas.height) {
        let page = document.createElement("canvas");
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页 //用getImageData剪裁指定区域，并画到前面创建的canvas对象中

        page
          .getContext("2d")
          .putImageData(
            ctx.getImageData(
              0,
              renderedHeight,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight)
            ),
            0,
            0
          );
        pdf.addImage(
          page.toDataURL("image/jpeg", 1.0),
          "JPEG",
          0,
          0,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); //如果后面还有内容，添加一个空页
        }
      }
      pdf.save("xxxxxx.pdf");
    },
    // 导出图片
    loadImg(canvas) {
      const dataURL = canvas.toDataURL('image/png')
      const creatDom = document.createElement('a')
      document.body.appendChild(creatDom)
      creatDom.href = dataURL
      creatDom.download = 'xxxxx'
      creatDom.click()
    }