使用场景
将某一个页面的某处或者整个页面进行转换为图片的形式输出。下面简单简述一下把dom节点转换为pdf输出的过程。
使用的插件
- html2Canvas：将html中的dom节点转换为canvas的形式。
- jspdf：将canvas转换为pdf
安装和下载
npm install html2canvas jspdf --save
示例代码：
//将iframe元素生成为PDF文件
htmlToPdf() {
let that = this
var title = 'pdf'
var ifra = document.getElementById('#dom')//获取需要转换的dom节点
html2Canvas(ifra, {//把目标节点转换为图片
allowTaint: true,//是否跨域获取图片(可选)
x: 10,//在生成图片的x偏移(可选)
y: 5,//在生成图片的y偏移(可选)
//scrollX//在画布上实现x偏移(可选)
//scrollY(可选)
scale: 2,//(可选)
width: 1536,//生成canvas的宽度(可选)
height: 700,//生成canvas的高度(可选)
logging: true,//(可选)
}).then(function (canvas) {
let contentWidth = canvas.width //画布的宽
let contentHeight = canvas.height //画布的高
let pageHeight = (contentWidth / that.pdfWidth) * that.pdfHeight
let leftHeight = contentHeight
let position = 0
let imgWidth = that.pdfWidth
let imgHeight = (that.pdfWidth / contentWidth) * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)//把对应的节点进行转换
let PDF = new JsPDF('', 'pt', 'a4')
//一页的情况下显示
if (leftHeight < pageHeight) {
//参数为：需要画的目标图片，类型，x，y，画的宽度，画的高度
PDF.addImage(pageData, 'JPEG', 60, 30, imgWidth, imgHeight)
} else {//多页的情形下显示
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= that.pdfHeight
if (leftHeight > 0) {
PDF.addPage()
}
}
}
//PDF.save('a.pdf');//也可以直接输出为a.pdf文件
var pdfBase64 = PDF.output('datauristring')
that.uploadPdf(pdfBase64)
})
},
可能会出现的问题
- 没有使用scale的时候，字体会变得很模糊。所以可以适当调整scale的大小来控制字体的清晰度，scale越大，字体越清晰，相对的dom在canvas的占比也会变小，例如scale为2，即把dom缩小到1/2,变小的时候字体自然变清晰了
- 居中问题,可以在html2Canvas的时候使用scrollX和scrollY来把对应的dom在canvas上实现居中。而这居中算法自行根据scale来实现等比例计算。
- 还有很多坑，未解决完。
