1.提前准备插件html2canvas和jspdf,若无转PDF需求只下载html2canvas即可。并在应用页面引入。
npm install html2canvas --save
npm install jspdf --save
//下载完成后在应用页面进行引用。
import html2canvas from "html2canvas";
import jspdf from "jspdf";
2.导出按钮,并设定导出区域
<el-button
class="button-upload"
size="mini"
title="生成图片"
type="success"
@click="toPdf()"
icon="el-icon-upload el-icon--right">导出报告</el-button>
//导出区域
<div class="content" ref="contentBox">
//代码内容
</div>
3.啥也不说了,都在代码里了。
toPdf(){
const ref = this.$refs.contentBox // 截图区域
html2canvas(ref, {
useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) => {
const dataURL = canvas.toDataURL('image/png')
//此处为导出图片方式
// const creatDom = document.createElement('a')
// document.body.appendChild(creatDom)
// creatDom.href = dataURL
// creatDom.download = '图片'
// creatDom.click()
//将图片转换为pdf文件
var pdf = new jspdf('','pt','a4')
var contentWidth = canvas.width;
//未生成pdf的html页面高度
var leftHeight = ref.scrollHeight;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//页面偏移
var position = 0;
while(leftHeight > 0 ){
pdf.addImage(dataURL,"JPEG",0 ,position, 595.28, 841.89)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
// pdf.addPage();
}
}
pdf.save("健康评估报告")//导出及文档名称
})
},