前端Vue页面生成PDF
0、前言
最近项目有个开发需求,将表格数据导出生成PDF,这种方法可以有两种。
- 一种是直接调用打印,用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差,且体验不好,显然不是我们想要的效果。
- 首先生成报告页面,也就是常规页面;然后将页面转换成图片( 用到的组件 html2canvas );最后将图片导出成PDF( 用到的组件 jspdf )。
1、安装依赖
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdf
2、导出图片转PDF
新建一个 index.vue 页面:
<template>
<div ref="pdf">
这是待转换的页面,点击
<button @click="handleExport">导出</button> 按钮,完成导出操作。
</div>
</template>
<script>
import {
downloadPDF} from "@/util/pdf.js" //工具方法,导出操作
export default {
name: "pdf",
data() {
return {
};
},
methods: {
handleExport(){
downloadPDF(this.$refs.pdf)
}
}
};
</script>
按钮点击事件中调用了一个工具方法 downloadPDF(),来自于工具类 pdf.js:
因为部分需求有需要生成的页面使用A4纸打印,那么pdf生成时的宽高尺寸就不能像上面一样设定。需要按照A4纸的尺寸比例调整(其它打印需求同理,使用对应纸张比例即可)
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export const downloadPDF = (page) => {
html2canvas(page).then(function (canvas) {
canvas2PDF(canvas)
})
}
const canvas2PDF = (canvas) => {
let contentWidth = canvas.width
let contentHeight = canvas.height
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = (592.28 / contentWidth) * contentHeight
// 第一个参数: l:横向 p:纵向
// 第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px")
let pdf = new jsPDF('p', 'pt')
pdf.addImage(
canvas.toDataURL('image/jpeg', 1.0),
'JPEG',
0,
0,
imgWidth,
imgHeight
)
pdf.save('导出.pdf')
}