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方法即可.

导出PDF

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

//当点击下载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“：

这样我们就可以遍历我们不想分割的最小的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"需要手动添加，每一个最小节点都要搞一下，很麻烦，所有如果哪位大佬有更完美的解决方法，希望能够交流、指正，不胜感激。

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