概述:jsPDF配合html2canvas可以将html转化为canvas,然后将canvas转为图片,最后使用jspdf将图片放到pdf中去,实现前端的pdf下载。
整体思路:
- 安装需要的依赖 html2canvas和jsPDF并导入
- 获取dom
- 使用htmlcanvas将dom转换为canvas
- 获取canvas的宽度、高度(稍微大一点)
- 实例化一个pdf 并将pdf的宽高设置为canvas的宽高
- 将canvas转为图片
- 将内容图片放在pdf中 调用pdf.save 设置pdf 名称并下载
具体步骤:
- 打开终端, 执行以下命令安装html2canvas和jsPDF
npm install html2canvas jspdf --save
- 在需要的页面导入 html2canvas和jsPDF模块
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
- 核心代码
download() {
const ref = this.$refs.contentRef
let canvasScale = 2
html2canvas(ref, {
backgroundColor: '#fff',
useCORS: true,
scale: canvasScale,
}).then((canvas) => {
this.loadOnePagePdf(canvas, canvasScale)
this.loadPagingPdf(canvas)
this.loadImg(canvas)
})
},
loadOnePagePdf(canvas, canvasScale) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let pdfX = (contentWidth + 10) / canvasScale * 0.75
let pdfY = (contentHeight + 10) / canvasScale * 0.75
let pdf = new JsPDF('', 'pt', [pdfX, pdfY])
let imgX = pdfX;
let imgY = (contentHeight / canvasScale * 0.75);
pdf.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
pdf.save("xxxxx.pdf");
},
loadPagingPdf(canvas) {
let pdf = new JsPDF("p", "mm", "a4");
let ctx = canvas.getContext("2d"),
a4w = 210,
a4h = 297,
imgHeight = Math.floor((a4h * canvas.width) / a4w),
renderedHeight = 0;
while (renderedHeight < canvas.height) {
let page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight);
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",
0,
0,
a4w,
Math.min(a4h, (a4w * page.height) / page.width)
);
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage();
}
}
pdf.save("xxxxxx.pdf");
},
loadImg(canvas) {
const dataURL = canvas.toDataURL('image/png')
const creatDom = document.createElement('a')
document.body.appendChild(creatDom)
creatDom.href = dataURL
creatDom.download = 'xxxxx'
creatDom.click()
}