第一步:先安装 html2canvas 和 jspdf
npm install html2canvas jspdf --save
第二步:到项目package.json中查看是否下载好html2canvas 和 jspdf
第三步:utils文件夹下创建一个html2canvas.js
第四步:内容源码已给大家提供,可直接拿去使用
-- 最下面的pdf.save里面是生成的文件名,自己可根据对应项目进行修改
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
// title:pdf文件名称,target:截取的内容
export function printPdf(title, target) {
var element = target
setTimeout(() => {
html2Canvas(element).then(function(canvas) {
var contentWidth = canvas.width
var contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89
// 未生成pdf的html页面高度
var leftHeight = contentHeight
// 页面偏移
var position = 0
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
var pdf = new JsPDF('', 'pt', 'a4')
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需进行分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
// 当内容超过pdf一页显示的高度范围时,进行分页
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(title + '赵同同报表.pdf') //此处命名可由自己对应项目而写 || 根据自己简单配置那当前页面标题传过来进行命名
})
}, 1000)
}
第五步:在对应组件页面中使用引入刚才创建的html2canvas.js
import { printPdf } from '@/utils/html2canvas'
第六步:在要进行截取的最大盒子上进行绑定(可以通过ref || id || class都可以)
// pdf生成
reportPdf() {
// 个人业务,获取名字用来当pdf文件名
let comNameHid="赵同"
// 抓取要截图的div的class名 也可以使用ref进行获取
let target = document.getElementsByClassName('pdf')[0]
// pdf背景色
target.style.background = '#FFFFFF'
// 滚动条置顶,避免截图不全,截图是从当前浏览器看的位置开始截取的
window.pageYOffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
// pdf工具
printPdf(comNameHid, target)
}
效果图:
成功下载到本地打开后的效果:
欢迎大家的指点与修改,源码可直接进行使用;