1.安装html2canvas
npm install --save html2canvas
2.安装pdfjs
npm install --save pdfjs
3.新建一个js文件,比如叫 pdf.js
代码如下:
// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
//新建导出pdf方法;传递参数:title:pdf标题,id指定dom的id,如果是导出整个页面,就在页面外层的元素加个id
export function getPdf(title, id) {
html2Canvas(document.querySelector(`#${
id}`), {
allowTaint: true,
useCORS: true,
}).then(function (canvas) {
let pdf = new JsPDF("p", "mm", "a4"); // A4纸,纵向
let ctx = canvas.getContext("2d");
ctx.mozImageSmoothingEnabled = false; // 关闭抗锯齿
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
let a4w = 190;
let a4h = 257; // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257
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();
} // 如果后面还有内容,添加一个空页
// delete page;
}
pdf.save(title + ".pdf");
});
}
4.在页面里调用方法:
<template>
<div>
<div>
//导出按钮
<button @click="exportPdf()"></button>
<div/>
//需要导出的dom
<div id="pdf"><div/>
</div>
</template>
....
<script>
//引入上一步写好的js文件
import {
getPdf} from "./pdf.js"
....
exportPdf(){
//参数:pdf标题,导出dom的id
getPdf("我是导出来的pdf", "pdf");
}
</script>