vue|vue导出单页pdf

vue项目导出单页pdf 提示:在vue项目中使用html2canvas+jspf导出单页(连续页不分页)pdf
安装插件

npm install --save html2canvas
npm i jspdf --save
在需要导出的vue页面中引入
import html2canvas from ‘html2canvas’;
import jsPDF from ‘jspdf’;
import { Loading } from ‘element-ui’; //导出耗时,用来提示的loading
伪html结构

methods中导出pdf方法
exportPDF() { this.$nextTick(() => { // 生成的pdf只有页面窗口可见的区域,有滚动条的下面没有生成出来,需在生成PDF前,改overflow属性auto为visible // 获取dom高度、宽度 var shareContent = document.querySelector('#dispatchReportPage'); var width = shareContent.offsetWidth / 4; var height = shareContent.offsetHeight / 4; let _this = this; // eslint-disable-next-line let loadingInstance = Loading.service({text: '正在导出,请稍等'}); html2canvas(document.getElementById('dispatchReportPage'), { dpi: 900, // scrolly: 0, // width:eleW,//生成后的宽度 // height:eleH,//生成后的高度 // scrollx: -10, useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。// backgroundColor: null //避免图片有白色边框 }).then((canvas) => { var context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var pageData = https://www.it610.com/article/canvas.toDataURL('image/jpeg', 1.0); var img = new Image(); img.src = https://www.it610.com/article/pageData; img.onload = ()=> { // 获取dom高度、宽度 img.width = img.width / 2; img.height = img.height / 2; img.style.transform = 'scale(0.5)'; if (width > height) { // 此可以根据打印的大小进行自动调节 // eslint-disable-next-line var pdf = new jsPDF('l', 'mm', [width * 0.505, height * 0.545]); } else { // eslint-disable-next-line var pdf = new jsPDF('p', 'mm', [width * 0.505, height * 0.545]); } pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545); pdf.save('名字'+ '.pdf'); loadingInstance.close(); }; }); }); // },

1.采用**单页**导是由于页面由二十几页组成长度较高,且页面中子组件页面高度不固定,采用分页导出导致有的子组件页 面被截断
2.采用单页面导出整个页面,html2canvas导出是否有最大长度限制未知, pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545),中height值可适当调整
3.页面中有滚动条时需要将带有滚动条的区域去掉滚动条再导出,overflow:visible
【vue|vue导出单页pdf】有bug欢迎留言讨论
番外分页pdf
Vue.prototype.pageToPdf = function (ele, pdfFileName) { console.log(ele.clientHeight, 'clientHeight ') let loadingInstance = Loading.service({text: '正在导出,请稍等'}); let eleW = ele.offsetWidth // 获得该容器的宽 //let eleH = ele.offsetHeight // 获得该容器的高 let eleH = ele.scrollHeight // 获得该容器的高 let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离 let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离 var canvas = document.createElement('canvas') var abs = 0 let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度(不包含滚动条) let win_out = window.innerWidth // 获得当前窗口的宽度(包含滚动条) if (win_out > win_in) { // abs = (win_o - win_i)/2; // 获得滚动条长度的一半 abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半 } canvas.width = eleW * 2 // 将画布宽&&高放大两倍 canvas.height = eleH * 2 var context = canvas.getContext('2d') context.scale(2, 2) // 增强图片清晰度 context.translate(-eleOffsetLeft - abs, -eleOffsetTop) window.pageYOffset = 0; document.documentElement.scrollTop = 0 document.body.scrollTop = 0; html2canvas(ele, { dpi: 900, // scrolly: 0, // width:eleW,//生成后的宽度 // height:eleH,//生成后的高度 // scrollx: -10, useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。// backgroundColor: null //避免图片有白色边框}).then(canvas => { var contentWidth = canvas.width var contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度; var pageHeight = (contentWidth / 552.28) * 841.89 // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致 //未生成pdf的html页面高度 var leftHeight = contentHeight + 10591 //页面偏移 var position = 0 // 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75pt = (px/scale)* 0.75 // 2为上面的scale 缩放了2倍 // var pdfX = ((contentWidth + 10) / 2) * 0.75 // var pdfY = ((contentHeight + 500) / 2) * 0.75 // 500为底部留白 var imgWidth = ((contentWidth + 10) / 2) * 0.75 var imgHeight = (imgWidth / contentWidth) * contentHeight console.log(imgHeight) //a4纸的尺寸[595.28,841.89],单位像素,html页面生成的canvas在pdf中图片的宽高 var pageData = https://www.it610.com/article/canvas.toDataURL('image/jpeg', 1.0) console.log(pageData, '============================')var pdf = JsPDF('', 'px', [imgWidth , 874.2]) //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 // pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // 分页while (leftHeight > 0) { pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 874.8 //避免添加空白页 if (leftHeight > 0) { pdf.addPage() } } pdf.save(pdfFileName + '.pdf') this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 loadingInstance.close(); }); }) }

    推荐阅读