html2canvas, JsPDF生成pdf

本文主要是介绍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的名字* 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.28const A4_HEIGHT = 841.89let contentWidth = canvas.widthlet contentHeight = canvas.heightlet 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_WIDTHlet imgHeight = A4_WIDTH / contentWidth * contentHeight// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75let 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 -= pageHeightposition -= 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