是什么
利用了jspdf和html2canvas两个插件实现的，把标签内的内容转成canvas再进行打印出pdf的一项功能。
为什么
利用JS满足某些打印pdf的场景
怎么做
最简单demo
- 安装插件
npm i html2canvas -S
npm i jspdf -S
- 加入工具函数（个人习惯放在项目的util目录下）
引入两个插件，原理就是通过document.querySelector获取当前dom下的内容转换成canvas的内容，再执行打印成PDF的方法。判断的语句是用于判断当前canvas的内容是否超出一页A4纸的高度，否则就自动往下分页。
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
getPdf: function(dom, title = 'download') {
html2Canvas(document.querySelector(dom), {
allowTaint: true
}).then(function(canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28 // A4纸宽度
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
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')
})
}
}
未解决
- 分页的内容如何分配，防止切割当前的页面内容
- canvas转PDF的失真（模糊）
