先安装依赖包
yarn add html2canvas jspdf
第二步封装一个js方法
// 页面导出为pdf格式 //title表示为下载的标题,html表示document.querySelector('#myPrintHtml')
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
const htmlPdf = {
getPdf(title, html) {
html2Canvas(html, {
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
scale: 12, // 按比例增加分辨率
}).then((canvas) => {
const pdf = new JsPDF('p', 'mm', 'a4') // A4纸,纵向
const ctx = canvas.getContext('2d')
const a4w = 190
const a4h = 200 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
const imgHeight = Math.floor((a4h * canvas.width) / a4w) // 按A4显示比例换算一页图像的像素高度
let renderedHeight = 0
while (renderedHeight < canvas.height) {
const 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`)
})
},
}
export default htmlPdf
最后一步就是.vue文件里的代码
<template>
<div>
<div id="pdfDom" ref="print">
<h1>title</h1>
<el-table :data="tableData" border>
<el-table-column prop="code" label="物料编码" ></el-table-column>
<el-table-column prop="name" label="物料描述" ></el-table-column>
<el-table-column prop="number" label="数量"></el-table-column>
</el-table>
<p>测试结束</p>
</div>
<button @click="derive">pdf导出</button>
</div>
</template>
<script>
import htmlPdf from "./utils/htmlToPdf";
export default {
data() {
return {
htmlTitle: "导出pdf",
tableData:[
{code:'111',name:'222',number:'333'}
],
};
},
methods: {
derive() {
htmlPdf.getPdf("导出pdf", this.$refs.print);
},
},
};
</script>
<style scoped>
#pdfDom{
width: 100%;
text-align: center;
}
</style>
最后在页面点击就可以导出你想要的pdf了,但是这个pdf和页面样式是挂钩的,如果导出的东西页面没有,那么在pdf里也不会展示
我这里有两个方案:第一就是导出word,第二就是点击事件先跳转页面,在另一个页面导出,这样用户也可以在导出之前看到自己想要导出的内容