html2canvas, JsPDF生成pdf
// 创建 pdf.js// 引入依赖import Vue from 'vue'import html2canvas from 'html2canvas'import JsPDF from 'jspdf'const PDF = {}PDF.install = function (Vue, options) {/*** targetDom: 需要打印的dom对象* name:pdf的名字* call
·
// 创建 pdf.js
// 引入依赖
import Vue from 'vue'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
const PDF = {}
PDF.install = function (Vue, options) {
/**
* targetDom: 需要打印的dom对象
* name:pdf的名字
* callback: 回调函数
*/
Vue.prototype.$createPdf = function (targetDom, name, callback) {
let cloneDom = targetDom.cloneNode(true)
cloneDom.style.width = targetDom.scrollWidth + 'px'
cloneDom.style.height = targetDom.scrollHeight + 'px'
cloneDom.style.background = '#FFFFFF'
document.body.appendChild(cloneDom)
html2canvas(copyDom, {
scale: 1, // 提升画面质量,但是会增加文件大小
useCORS: true, // 允许跨域图片 当图片是链接地址时,需加该属性,否组无法显示图片
imageTimeout: 0, // 图片加载延迟,默认延迟为0,单位毫秒
height: targetDom.scrollHeight, // canvas的高度设定
width: targetDom.scrollWidth, // canvas的宽度设定
dpi: window.devicePixelRatio * scale, // 将分辨率提高到特定的DPI
}).then(canvas => {
document.body.removeChild(cloneDom)
// a4纸的尺寸[592.28,841.89]
const A4_WIDTH = 592.28
const A4_HEIGHT = 841.89
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageData = canvas.toDataURL('image/jpeg', 1.0)
// 一页pdf html页面生成的canvas高度;
let pageHeight = contentWidth / A4_WIDTH * A4_HEIGHT
// 未生成pdf的html页面高度
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸[592.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = A4_WIDTH
let imgHeight = A4_WIDTH / contentWidth * contentHeight
// 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
let pdf = new JsPDF('', 'pt', 'a4')
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度
// 当内容未超过pdf一页显示的范围,无需分页
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 -= A4_HEIGHT
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
// 直接下载
// pdf.save(name + '.pdf')
// base64转成文件
let buffer = pdf.output('datauristring')
let myfile = dataURLtoFile(buffer, name)
callback(myfile)
})
}
}
Vue.use(PDF)
export default PDF
更多推荐
已为社区贡献11条内容
所有评论(0)