1、npm安装两个模块
第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save
2、定义函数,在指定页面引入
```javascript
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
<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="downloadPDF">导出PDF</button>
export default{
data(){
title:"页面导出PDF文件名"
},
downloadPDF() {
let that = this;
let element = document.getElementById("pdfDom");
html2canvas(element, {
logging: false,
useCORS: true,
}).then(function (canvas) {
let pdf = new jsPDF("p", "mm", "a4"); //A4纸,纵向
let 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) {
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(); //如果后面还有内容,添加一个空页
}
pdf.save(that.title);
});
},```
}