VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断

1、安装html2canvas和JsPdf

//第一个.将页面html转换成图片
npm install --save html2canvas 
//第二个.将图片生成pdf
npm install jspdf --save

2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
    //当点击下载pdf按钮不在页面顶部的时候会造成PDF样式不对
    //首先回到页面顶部在下载PDF
      let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {

        var pdf = new JsPDF('p', 'mm', 'a4');    //A4纸，纵向
            var ctx = canvas.getContext('2d'),
                a4w = 190, a4h = 277,    //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
                imgHeight = Math.floor(a4h * canvas.width / a4w),    //按A4显示比例换算一页图像的像素高度
                renderedHeight = 0;

            while(renderedHeight < canvas.height) {
                var 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();//如果后面还有内容，添加一个空页
            }
            
            pdf.save(title + '.pdf')
      }
      )
    }
  }
}

3、在main.js中使用我们定义的函数文件。

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、在需要的导出的页面..调用我们的getPdf方法即可.

    //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分

导出PDF

（前面的代码来自：https://www.jianshu.com/p/dd120b65446a ，感谢：不要和我名字一一样）

在大佬封装函数基础上只是加了这句：

//当点击下载pdf按钮不在页面顶部的时候会造成PDF样式不对
    //首先回到页面顶部在下载PDF
      let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }

5、封装到这一步，已经可以实现下载PDF了，但是，存在一个问题，页面会被切断，极其的恶心，丑到死！！！

断掉的PDF.png

如果是静态页面，可以将每个页面设置成：

//*按照我自己的代码来计算，下面的格式正好导出一页完整的PDF
.page{
    width:1000px;
    height:1450px;
}

但是问题在于页面里的数据通过后端动态请求过来，我们不知道文本会有多长，页面会有多长，所以只是完成page这个class还不足以让我们实现导出的功能，在百度＋谷歌不成后，只能自己想办法，想到既然是切断，那就是在最小的一层嵌套上切断的，所以决定给最小的一层嵌套的代码加上一个class=”small“：

    
{{item.title}}
    

        

            {{sonItem}}
        
    

这样我们就可以遍历我们不想分割的最小的class：small了，于是在dom渲染的时候我们执行下面的函数：

mounted() {
    this.$nextTick(() => {
     this.getSmall()
  },
 methods:{
     //*重复使用可以将方法单独提取js文件中，然后在页面通过import使用，此处不再概述
     //*1450是我自己的页面高度，可以声明变量
     getSmall(){
     let dom = document.getElementsByClassName("small");
        for (var i = 0; i < dom.length; i++) {
            if (
                this.offset(dom[i]).top % 1450 > this.offset(dom[i + 1]).top % 1450 &&
                1450 - (this.offset(dom[i]).top % 1450) < dom[i].offsetHeight
                ) {
                dom[i-1].style.marginBottom =
                1520 - (this.offset(dom[i]).top % 1450) + "Px";
                }
              }
            });
        }，
        offset(element) {
          var pos = { left: 0, top: 0 };
          var parents = element.offsetParent;
          pos.left += element.offsetLeft;
          pos.top += element.offsetTop;
          while (parents && !/html|body/i.test(parents.tagName)) {
            pos.left += parents.offsetLeft;
            pos.top += parents.offsetTop;
            parents = parents.offsetParent;
          }
          return pos;
        },
      }

这样当最小的节点大于剩余的高度时，添加一个marginBottom使其进入下一页，可以解决PDF导出切断的问题，但是class="small"需要手动添加，每一个最小节点都要搞一下，很麻烦，所有如果哪位大佬有更完美的解决方法，希望能够交流、指正，不胜感激。

搞到凌晨终于解决了，所以开心的一匹，睡觉！！！希望这篇文章能帮到大家，如果转发请携带链接！

再次感谢：（https://www.jianshu.com/p/dd120b65446a ，感谢：不要和我名字一一样）