<template> <div id="main" ref="workbench" v-loading="loading" class="echartsPdf"> 需要的内容 </div> </template> <script> import html2canvas from 'html2canvas' import Jspdf from 'jspdf' export default { name: 'ReportDetail', directives: {}, data() { return { } }, watch: { }, mounted() { }, created() { this.$nextTick(async() => { await this.initAxis() }) }, beforeDestroy() { // cleartimeout(this.timer) }, methods: { // 避免分页被截断 outPutPdfFn() { const vm = this const A4_WIDTH = 592.28 const A4_HEIGHT = 841.89 // $myLoading 自定义等待动画组件,实现导出事件的异步等待交互 vm.$nextTick(() => { // dom的id。 const target = document.getElementById('main') const pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT // 获取分割dom,此处为class类名为item的dom const lableListID = document.getElementsByClassName('echartsSection') // 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,把他挤下去,分割 for (let i = 0; i < lableListID.length; i++) { const multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight) if (this.isSplit1(lableListID, i, multiple * pageHeight)) { const divParent = lableListID[i].parentNode // 获取该div的父节点 const newNode = document.createElement('div') newNode.className = 'emptyDiv' newNode.style.background = '#01195e' const _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight) newNode.style.height = _H + 30 + 'px' newNode.style.width = '100%' const next = lableListID[i].nextSibling // 获取div的下一个兄弟节点 // 判断兄弟节点是否存在 console.log(next) if (next) { // 存在则将新节点插入到div的下一个兄弟节点之前,即div之后 divParent.insertBefore(newNode, next) } else { // 不存在则直接添加到最后,appendChild默认添加到divParent的最后 divParent.appendChild(newNode) } } }
// 页面转换下载 this.pdf1() }) }, // 判断是否需要添加空白div isSplit1(nodes, index, pageHeight) { // 计算当前这块dom是否跨越了a4大小,以此分割 if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) { return true } return false }, pdf1() { // 避免出现浏览器滚动条导致的内容不全处理 document.body.scrollTop = 0 // div内部滚动导致内容不全处理 const that = this document.getElementById('app').style.height = 'auto' setTimeout(() => { html2canvas(document.getElementById('main'), { background: '#01195e', allowTaint: true // height: document.getElementById('upload').scrollHeight, // windowHeight: document.getElementById('upload').scrollHeight }).then(canvas => { var contentWidth = canvas.width var contentHeight = canvas.height // 一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89 // 未生成pdf的html页面高度 var leftHeight = contentHeight // 页面偏移 var position = 0 // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28 var imgHeight = 592.28 / contentWidth * contentHeight var pageData = canvas.toDataURL('image/jpeg', 1.0) var pdf = new Jspdf('', 'pt', 'a4') // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) // 当内容未超过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 -= 841.89 // 避免添加空白页 if (leftHeight > 0) { pdf.addPage() } } }
// 自己定义的报告名称 pdf.save(`${that.rowInfo.reportName}.pdf`) }) }, 300) }, handleChange() {}, async initAxis() { this.loading = true const that = this this.timer = setTimeout(() => { that.outPutPdfFn() }, 8 * 1000) } } } </script> <style scoped></style>
标签:Jspdf,vue,const,pageHeight,lableListID,pc,var,pdf,document From: https://www.cnblogs.com/suka/p/17309872.html