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方法即可.
<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>
（前面的代码来自：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“：
<div class="analysisItem" v-for="(item,index) in dataSummary" :key="index">
<h5 class="title small">{{item.title}}</h5>
<div class="content">
<p class="small" v-for="(sonItem,index) in item.content" :key="index">
<span>{{sonItem}}</span>
</p>
</div>
</div>
这样我们就可以遍历我们不想分割的最小的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 ，感谢：不要和我名字一一样）
网友评论