vue实现HTML转PDF(回炉重制升级版）

这些总结是基于本人工作遇到的需求总结的问题点和自己用到的解决方法，其中说的不好不对的多多指出，后续持续更新完善，尽量给遇到此类问题的小伙伴些解决思路。

update: 2023-5-24

这篇文章是之前遇到问题总结的一些点，有些说的也不太对，目前本文章提到的方案均以废弃,仅提供思路参考作用，以下gitee链接是最新纯前端导出解决方案，截断，清晰度，页边距，页眉页脚，富文本都处理了，持续优化更新中！！效果可clone下来跑一下demo。

回路重制版html转pdf
https://gitee.com/jseven68/vue-pdf2

问题点

1.文字显示有问题，总是有一个字显示不全

这里我发现给我们要导出的html最外层加padding就可以解决这个问题。

2.图片显示问题（分页截断）

图片如果刚好在一页pdf末尾，会被截断到下一页显示

这个问题解决方法:
一种是只在一张pdf显示所有内容，但这样就不是按格式导出了，比如想导出a4格式就不行了。
其他就是要判断元素截断位置进行处理了，其他两种实现后面贴代码，请看 a4导出2 和 导出3

3.设置页边距

我们想导出的pdf留出边距，有两种方法
1.设置样式（只适合一页pdf。。）
直接设置最外层padding,不过这样不太行哈哈哈，，分页了底部padding只对最后一页生效哈哈哈，大家用第二种。
2.通过插件自带的设置
这里举例了一种设置方式，但是发现网上很多种导出方法，实现有些差异，但是基本都是改这两个地方。

 var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40 20+20=40（哈哈两边哦)
 var a4Height = 801.89 // 原A4高   841 因为要设置边距 20 ,这里要减掉 40
 // 就是在这里设置两边边距 20 20
 pdf.addImage(pageData, 'JPEG', 20,20, a4Width, a4Width / canvas.width * leftHeight);

4.水印

后面介绍的实现方法中导出1有可以设置水印的，参考其他博主的。

5.清晰度

目前发现网上基本有两种设置方法：
1.设置dpi和scale（这里应该设置scale就可以了，最近看到官网每页dpi这个参数了)
使用反馈：设置这两个确实能提高清晰度，很清晰，但是文件也会变大好多，对于pdf页数少的时候可以，页数超五页还会出现导出空白问题，发现scale设置有影响，也不知道是不是我使用的问题。

 html2Canvas(DomName, {
        //允许跨域图片的加载
        useCORS: true,
         dpi: window.devicePixelRatio*4 , //将分辨率提高到特定的DPI 提高四倍
         scale: 4, //按比例增加分辨率
         //dpi:300, // 也有设置这个的
         // scale:2, // 搭配300
        
      }).then(function(canvas) {}

2.创建一个canvas， 将画布宽&&高放大n倍

  var width = el.offsetWidth; //获取dom 宽度
      var height = el.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      var scale = 2; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      html2Canvas(DomName, {
        //允许跨域图片的加载
        useCORS: true,
        canvas :canvas 
      }).then(function(canvas) { }

我记得我用了好像效果不明显，大家可以试试。

6. 滚动影响

如果要导出的界面发生了滚动，会导致截取的图片上方有一部分空白。

解决方法：1.获取页面滚动条滚动的高度，并在配置中配置scrollY: -scrollTop

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
html2canvas(dom,{
	useCORS: true,
    scrollY: -scrollTop,
    scrollX: 0,
})

2. 使用滚动条置顶，就是每次导出先置顶再调用导出方法

   getPdfFromHtml(ele, pdfFileName) {
       window.pageYoffset = 0; // 滚动置顶
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      html2Canvas(ele,{
        useCORS: true,
      }).then(canvas=>{
      }

7.页面横向滚动导致横向导出不全问题
这个如果是导出的外层容器的滚动条，通过el.scrollWidth获取宽度没问题，但是如果是容器里面产生的滚动条，就会导致导出不全，比如里面是一个element表格，表格有横向滚动条，这时候就要计算最大宽度并传给导出方法。

这个可能解决方法很多，我这里是通过克隆一个dom实现，并且将宽度传进来。
比如页面：
表格是有滚动条，但是最外层宽度只是可视区域宽度。

获取表格宽度：

    outputPdf() {
      // 计算总宽度和表头高度
      let pdfDom = document.getElementById("classPdf");
      let table__header = pdfDom.getElementsByClassName("el-table__header")[0];
        htmlToPdf2(
          this.$route.query.className + "成绩单",
          "classPdf",
          table__header.offsetWidth
        )
        }

(这里导出的方法具体看导出2）

export function htmlToPdf2(title, domName, width) {
  // 滚动置顶,防止顶部空白
   window.pageYoffset = 0;
   document.documentElement.scrollTop = 0;
   document.body.scrollTop = 0;
  return new Promise((resolve, reject) => {
    const ele = document.getElementById(domName);
    let eleW = ele.scrollWidth; // 获得该容器的宽
    width = width || eleW;
    var cloneDom = ele.cloneNode(true); // 复制一个dom元素插入body,解决横向滚动问题
    cloneDom.style.width = width + "px";
    document.body.appendChild(cloneDom);
    let opts = {
      width: width,
      // height: eleH,
      useCORS: true,
      background: "#FFF",
      allowTaint: false,
    };

      html2Canvas(cloneDom, opts).then(canvas => {
       ...xxx(具体看导出2）
      // 保存文件
      try {
          pdf.save(title + ".pdf");
          resolve();
          // 移除克隆节点
          cloneDom.parentNode.removeChild(cloneDom);
      } catch (error) {
        console.log("下载失败pdf");
        reject();
      }
    });

8.pdf很多页时候（10页以上）部分元素缺失问题

这个我没很多页的需求（10页以上），不过看到有博主遇到了类似问题，这里贴一下

导出的pdf部分元素缺失，这个问题只会在pdf的内容过大时出现，我是在导出的pdf在5M左右时出现的，当你确定你的缺失的元素是在你要导出的dom内时，若导出的pdf还是有部分内容缺失那你大概率是和我碰到一样的问题了。

解决方法：由原来的一次截图，换为分多次截图，将原来dom里面的元素进行克隆放进多个div中，由原来的对dom进行截图换为循环对多个div进行截图即可。（如果看不懂这个处理方式，请先了解html2canvas+jsPDF是如何将html转为pdf的）
在你循环进行截图时有可能出现最后pdf里面的内容顺序是错乱的，出现这个问题是因为第一个div转为的图片添加到pdf中还未添加完，第二个div就已经截图完也开始向pdf添加图片了。此时需要在第二个div截图完向pdf添加图片的方法设置等待时间：上个伪代码

let imgBase64 = canvas.toDataURL('image/jpeg', 1.0)

setInterval(()=>{

pdf.addImage(imgBase64, 'JPEG', 0, 0, imgWidth, imgHeight)；

}, 3000);

我这边调试设置等待3秒就可以了

原文链接：https://blog.csdn.net/u013754060/article/details/125888789

实现方法：

首先记得先转包

npm install html2canvas
npm install jspdf

import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

1.全部内容导出一张pdf

就是全部一张pdf导出，方法直接复制使用就行

// 只导出一张pdf,不适合要求是a4,a5..等，滚动有影响，需要设置滚动置顶
    // 能解决图片导出问题
    printOut(DomName) {
      DomName = document.getElementById(DomName)
      console.log("正在帮您导出......");
        window.pageYoffset = 0; // 滚动置顶
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      //title，随意设置，也可以提出来做参数，传入进来，自己发挥
      var title = "测试啊"; // 导出名字
      var that = this;
      var shareContent = DomName; //需要截图的包裹的（原生的）DOM 对象
      //打印看有没有获取到dom
      console.log(shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      var scale = 2; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      html2Canvas(DomName, {
        //允许跨域图片的加载
        useCORS: true,
         dpi: window.devicePixelRatio , //将分辨率提高到特定的DPI 提高四倍
        // scale: 2, //按比例增加分辨率
      }).then(function(canvas) {
        var context = canvas.getContext("2d");
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var imgData = canvas.toDataURL("image/", 1.0); //转化成base64格式,可上网了解此格式
        var img = new Image();
        img.src = imgData;
        img.onload = function() {
          img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2
          img.height = img.height / 2;
          img.style.transform = "scale(0.5)";
          if (this.width > this.height) {
            //此可以根据打印的大小进行自动调节
            var doc = new JsPDF("l", "mm", [
              this.width * 0.555,
              this.height * 0.555
            ]);
          } else {
            var doc = new JsPDF("p", "mm", [
              this.width * 0.555,
              this.height * 0.555
            ]);
          }
          doc.addImage(
            imgData,
            "jpeg",
            10,
            0,
            this.width * 0.505,
            this.height * 0.545
          );
          doc.save(title + "-文件.pdf");
          console.log("倒数3秒导出啦");
        };
      });
    }

效果，设置了清晰度，文件好大

2.a4分页导出1

能解决图片被截断问题，可设置页边距，水印，清晰度（越清晰文件越大），文字显示不全问题，解决部分分页截断问题（表格的没解决）
缺点：之前发现这个在火狐导出会卡住，暂时不知道原因，也许是因为我使用的问题，大家可以看导出2和导出3。

// 可设置页边距，滚动有影响，需要设置滚动置顶
    // 能解决图片导出问题
   getPdfFromHtml(ele, pdfFileName) {
       ele = document.getElementById('pdfDom')
       pdfFileName = pdfFileName||'pdf'
         window.pageYoffset = 0; // 滚动置顶
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // ele.style.fontFamily='宋体';
      // ele.style.padding='30px';
      let scale = window.devicePixelRatio * 2
      html2Canvas(ele,{
        // dpi: 300,
        dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
        scale: 4, //按比例增加分辨率
        logging: false,
        // scale:scale,
        useCORS: true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
        allowTaint: false,
        height: ele.offsetHeight,
        width: ele.offsetWidth,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        backgroundColor: '#fff'
      }).then(canvas=>{
        const _this = this;
        //未生成pdf的html页面高度
        var leftHeight = canvas.height;
        var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40
        var a4Height = 801.89 // 原A4高   841 因为要设置边距 20 ,这里要减掉 40
        //一页pdf显示html页面生成的canvas高度;
        var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);

        //pdf页面偏移
        var position = 0;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        var pdf = new JsPDF('x', 'pt', 'a4');
        var index = 1,
          canvas1 = document.createElement('canvas'),
          height;
        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');

        function createImpl(canvas) {
          if (leftHeight > 0) {
            index++;
            var checkCount = 0;
            if (leftHeight > a4HeightRef) {
              var i = position + a4HeightRef;
              for (i = position + a4HeightRef; i >= position; i--) {
                var isWrite = true
                for (var j = 0; j < canvas.width; j++) {
                  var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                  if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                    isWrite = false
                    break
                  }
                }
                if (isWrite) {
                  checkCount++
                  if (checkCount >= 10) {
                    break
                  }
                } else {
                  checkCount = 0
                }
              }
              height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
              if(height<=0){
                height = a4HeightRef;
              }
            } else {
              height = leftHeight;
            }

            canvas1.width = canvas.width;
            canvas1.height = height;

            // console.log(index, 'height:', height, 'pos', position);

            var ctx = canvas1.getContext('2d');
            ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height); // 边距这里设置0，不然又黑边

            var pageHeight = Math.round(a4Width / canvas.width * height);
            // pdf.setPageSize(null, pageHeight)
            if(position != 0){
              pdf.addPage();
            }
            // 设置 20px 边距
            pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, a4Width, a4Width / canvas1.width * height);
            leftHeight -= height;
            position += height;
            // $('.pdfProgress').text(index + 1);
            // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
            if (leftHeight > 0) {
              //添加全屏水印
              const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAYAAADIWo5HAAACLUlEQVR42u2Zy2sCMRDGV9tbtVJKrQ/0JBWLvbgsaOttQQqreO5R6GHP/v+HZiEDQ9i8k33YDHyXbcxufpN8maRRFCJEiBAhQoTgRIfoh+hKNBe0G9I2GVG3om9bEl2I9rcIoE/77Cq8Myd6sn2ZSBgAr80YARhI+gOwCdGW6EB/d6R9XDUGFrsAf2Fe7Fswk1JBmzMd1DNKgI2EywQyUKYjkxFeOwwxkwgAvBJNqEa0DzaTHcn3qWrXdA/ocQD8m11ABUDfQF0fpujjI2QAeoZetdYdfOzB9HgGNEF6owM8Ec3Q8wEDgP07T6ktgNyB8YgAqGZ0b+gRsS2AtQP/iAUAHlAdsEW7TY6eFVrVNQN8A2AjlZho5R5wYjJhoqMiADy4DFWLPJMcKBhv3AYThFi4yJyrAAAfDrY/1SVQVhLDOWDowIwzSQ1TqwfA1P5CU3yJlsPY8fmjcTMgptmeIwB3aFbsLCvM2BRAFR4AZXYxuEdmn38hmjoosY0B5IonxLNhIYTNby0odMoAJJL1/k10bwpgQztZKaxb2YXFRnAUhexDHzoAUsGxu3j+awNA5+RmcxW1UCx1eQB4SyI1AaBrbiMEYGrwexgYBlgrgGtU/ZUY3AlGhgByTvV5MQGgW1SomqBOUWLiATy1wgNsABQz51PzWHxTALzWAW0F0EM+MKPmnLj6x0lbAPDuC5zfNPsCcChZ25DZd4VBJCW7wrRp1+whQoQIESJEg+IPRa38G55TPkQAAAAASUVORK5CYII='
              for(let i=0;i<6;i++){
                for(let j=0;j<5;j++){
                  const  left = (j*120)+20;
                  // pdf.addImage(base64,'JPEG', left, i*150, 20, 30); // 关掉水印
                }
              }
              setTimeout(createImpl, 500, canvas);
            } else {
              pdf.save(pdfFileName + '.pdf');
            }
          }
        }

        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < a4HeightRef) {
          pdf.addImage(pageData, 'JPEG', 20,20, a4Width, a4Width / canvas.width * leftHeight);
          pdf.save(pdfFileName + '.pdf')
        } else {
          try {
            pdf.deletePage(0);
            setTimeout(createImpl, 500, canvas);

          } catch (err) {
            console.log(err);
          }
        }
      })

    }

效果：
可以看到，符合预期效果

2.a4分页导出2（推荐）

这个也解决了内边距，部分分页截断（表格没解决），横向滚动等，谷歌火狐都行。

目前不是表格缺pdf不是很多页的时候我用这个。

export function htmlToPdf2(title, domName, width) {
  // 滚动置顶,防止顶部空白
  // window.pageYoffset = 0;
  // document.documentElement.scrollTop = 0;
  // document.body.scrollTop = 0;
  return new Promise((resolve, reject) => {
    const ele = document.getElementById(domName);

    let eleW = ele.scrollWidth; // 获得该容器的宽
    width = width || eleW;
    console.log("scrollWidth", eleW);
    //   let eleH = ele.offsetHeight // 获得该容器的高
    var cloneDom = ele.cloneNode(true); // 复制一个dom元素插入body,解决横向滚动问题
    cloneDom.style.width = width + "px";
    document.body.appendChild(cloneDom);

    // 这样设置滚动也行
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
    let opts = {
      width: width,
      // height: eleH,
      useCORS: true,
      background: "#FFF",
      allowTaint: false,
      scrollY: -scrollTop,
      scrollX: 0
    };

    html2Canvas(cloneDom, opts).then(canvas => {
      let pdf = new JsPDF("p", "mm", "a4"); // A4纸，纵向
      let ctx = canvas.getContext("2d");
      let a4w = 190;
      let a4h = 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      let imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
      let 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",
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); // 添加图像到页面，保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); // 如果后面还有内容，添加一个空页
        }
      }
      // 保存文件
      try {
          pdf.save(title + ".pdf");
          resolve();
          // 移除克隆节点
          cloneDom.parentNode.removeChild(cloneDom);
      } catch (error) {
        console.log("下载失败pdf");
        reject();
      }
    });
  });
}

2.a4分页导出3（解决表格导出截断，推荐）

这个解决了横向滚动，左右边距，表格类型的导出截断等

优点：主要解决了像element表格导出，排版内容可自定义之类的
缺点：目前缺点是上下边距我没解决，尝试解决，但是总是有瑕疵，暂时先这样吧。

原理：给每个可能会被截断元素加上类，然后动态的计算该元素的位置是否在下一页和上一页之间，如果在的话就添加一个空白元素把这个元素给挤下去，这样就能实现了，其实就是导出前我们根据一页的高度，计算内容是否超过了一页，如果超过了就插入一个空白节点，将要被截断的挤下去。

参考原文链接：

https://blog.csdn.net/qq_24882601/article/details/123863353

// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

/*
 解决分页截断问题，暂时没解决上下边距问题。
 * 使用说明
 * ele:需要导出pdf的容器元素(dom节点 不是id)
 * pdfFileName: 导出文件的名字 通过调用outPutPdfFn方法也可传参数改变
 * splitClassName: 避免分段截断的类名 当pdf有多页时需要传入此参数 , 避免pdf分页时截断元素  如表格<tr class="itemClass"></tr>,element表格可传 el-table__row
 * scrollWidth是当你要导出的容器内产生了横向滚动的时候，你要将最大宽度传进去，比如我用了element表格，表格内部产生了滚动，  let table__header = pdfDom.getElementsByClassName("el-table__header")[0]; 将 table__header.offsetWidth传进去才能导出横向滚动的部分。
 * 调用方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass'，scrollWidth);
 * 若想改变pdf名称 pdf.outPutPdfFn(fileName);  outPutPdfFn方法返回一个promise 可以使用then方法处理pdf生成后的逻辑
 * */
// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
class PdfLoader {
  constructor(ele, pdfFileName, splitClassName, scrollWidth) {
    this.ele = ele;
    this.pdfFileName = pdfFileName;
    this.splitClassName = splitClassName;
    this.A4_WIDTH = 595; // a4纸的尺寸[595,842],单位像素
    this.A4_HEIGHT = 842;
    this.scrollWidth = scrollWidth || ele.scrollWidth; // 大多时候不需要传width,但是出现容器内容出现横向滚动的情况，就要传入最大宽度，不然横向会导出不全
  }

  // 生成pdf
  async getPDF(resolve, reject, cloneDom) {
    let ele = cloneDom;
    let pdfFileName = this.pdfFileName;

    html2Canvas(cloneDom, {
      useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      width: this.scrollWidth || ele.scrollWidth,
      dpi: 300,
      scale: 2, 
      background: "#FFF"
    }).then(async canvas => {
      try {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        let pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT; // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
        //未生成pdf的html页面高度
        let leftHeight = contentHeight;
        //页面偏移
        let position = 0;
        //a4纸的尺寸[595,842],单位像素，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = this.A4_WIDTH - 20; //-20为了页面有右边距
        let imgHeight = (this.A4_WIDTH / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        let pdf = JsPDF("", "pt", "a4");
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示
          pdf.addImage(pageData, "JPEG", 10, 0, imgWidth, imgHeight);
        } else {
          // 分页
          while (leftHeight > 0) {
            // 10是因为我上面减掉了20
            pdf.addImage(pageData, "JPEG", 10, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= this.A4_HEIGHT;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        // 返回promise
        pdf.save(pdfFileName + ".pdf", { returnPromise: true }).then(() => {
          // 移除克隆节点
          cloneDom.parentNode.removeChild(cloneDom);
          //去除添加的空div 防止页面混乱（使用了克隆节点就不需要这里移除了）
          // let doms = document.querySelectorAll(".emptyDiv");
          // for (let i = 0; i < doms.length; i++) {
          //   doms[i].remove();
          // }
        });
        // this.ele.style.height = "";
        resolve();
      } catch (error) {
        reject();
      }
    });
  }

  // 处理数据
  async outPutPdfFn() {
    // 滚动置顶,防止顶部空白
    window.pageYoffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    return new Promise((resolve, reject) => {
      let cloneDom = this.ele.cloneNode(true); // 复制一个dom元素插入body,解决横向滚动问题
      cloneDom.style.width = this.scrollWidth + "px";
      document.body.appendChild(cloneDom);
      cloneDom.style.height = "initial";

      let pageHeight = (this.scrollWidth / this.A4_WIDTH) * this.A4_HEIGHT;
      // 获取分割dom，此处为class类名为item的dom
      let domList = cloneDom.getElementsByClassName(this.splitClassName);
      // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
      let pageNum = 1; //pdf页数
      let eleBounding = cloneDom.getBoundingClientRect();
      for (let i = 0; i < domList.length; i++) {
        let node = domList[i];
        // getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
        let bound = node.getBoundingClientRect();
        // 两者相减获得当前元素距离容器顶部距离
        let offset2Ele = bound.top - eleBounding.top;
        let currentPage = Math.ceil(
          (bound.bottom - eleBounding.top) / pageHeight
        ); //当前元素应该在哪一页
        if (pageNum < currentPage) {
          pageNum++;
          let divParent = domList[i].parentNode; // 获取该div的父节点
          let newNode = document.createElement("div");
          newNode.className = "emptyDiv";
          newNode.style.background = "white";
          newNode.style.height =
            pageHeight * (pageNum - 1) - offset2Ele + 30 + "px"; //+30为了在换下一页时有顶部的边距
          newNode.style.width = "100%";
          let next = domList[i].nextSibling; // 获取div的下一个兄弟节点
          // 判断兄弟节点是否存在
          if (next) {
            // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
            divParent.insertBefore(newNode, node);
          } else {
            // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
            divParent.appendChild(newNode);
          }
        }
      }
      // 异步函数，导出成功后处理交互
      this.getPDF(resolve, reject, cloneDom);
    });
  }
}

export default PdfLoader;

其他问题：

3. 图片跨域问题, 我这边图片是阿里云的地址, 默认在页面 分页 用Img标签展示, 点击导出的时候再请求一次后端拿回全部 数据 展示(这里展示是定位到其他地方,不遮住原来页面) , 这时导出就报跨域了.

跨域解决:
(1) 如果是直接导出当前页面的内容, 我们直接设置 useCORS: true 就可以解决
(2) 但是我这里场景不太一样,上面也说了, 尝试把 阿里云地址的图片转成base64再给img, 但是转base64过程也报跨域, 又想到通过ajax请求 回来文件流再转也报跨域,后端也说了图片已经允许跨域请求, 这是为啥啊???

后来我解决了,具体看这篇博客吧
图片跨域解决