依赖安装
bash
npm install html2canvas
npm install jspdf
函数调用以及实现(vue)
javascript
// 引入
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
const previewEl = document.getElementById('targetDom')
// 函数调用
this.savePdf(previewEl).then(res => {
})
// 函数实现
savePdf(html2canvasDom, downloadName = '下载文件') {
return html2canvas(html2canvasDom, {
// width: 1714,
// height: 200,
backgroundColor: '#fff',
useCORS: true, // 解决文件跨域问题
scale: window.devicePixelRatio * 2, // 按比例增加分辨率
dpi: 300
})
.then(canvas => {
const a4Width = 595.28
const a4Height = 841.89
// 可以上传后端或者直接显示
// 用于将canvas对象转换为base64位编码
var context = canvas.getContext('2d')
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
let position = 0
// 生成的画布元素宽高
const canvasWidth = canvas.width
const canvasHeight = canvas.height
// 页面等比例缩放后宽高
const pageWidth = a4Width
const pageHeight = (a4Width / canvasWidth) * canvasHeight
// 返回图片dataURL,参数:图片格式和清晰度(0-1)
const jpeg = canvas.toDataURL('image/jpeg', 1.0)
// 第一个参数是纵横向,第二个参数是单位,第三个参数是生成pdf的大小,自定义pdf大小的话可以传入一个数组,eg:[164.14, 424.5]
// 方向默认竖直,尺寸ponits,格式a4 [595.28,841.89]
// const pdf = new JsPDF('', 'pt', [595.28, 841.89]/* [a4Width, a4Height] */)
const pdf = new JsPDF('', 'pt', [605.28, 841.89]/* [a4Width, a4Height] */)
// const pdf = new JsPDF('', 'pt', [this.contentWidth, 841.89]/* [a4Width, a4Height] */)
// const pdf = new JsPDF('', 'pt', 'a4'/* [a4Width, a4Height] */)
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
let height = pageHeight
if (height < a4Height) {
// 第三,四个参数是图片偏移位置,第五六个参数是生成的图片的宽高
pdf.addImage(jpeg, 'JPEG', 5, 5, pageWidth, pageHeight) // 从图片顶部开始打印
} else {
while (height > 0) {
pdf.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight)
height -= a4Height
position -= a4Height
// 避免添加空白页
if (height > 0) {
pdf.addPage()
}
}
}
pdf.save(`${downloadName}.pdf`)
})
}
相关资料记录: