前端导出页面PDF

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'
import { Loading } from 'element-ui'
let downloadLoadingInstance// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(fileName, node) {downloadLoadingInstance = Loading.service({ text: 'データをダウンロード中です。しばらくお待ちください', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })document.body.scrollTop = document.documentElement.scrollTop = 0var clientH = node.clientHeightnode.style.height = node.scrollHeight + 'px'// 把要导出的元素高度设置为滚动高度html2canvas(node, {allowTaint: true,useCORS: true,backgroundColor: '#142D42', // 如果指定的div没有设置背景色会默认成黑色,这里是个坑y: 0,ignoreElements: element => {if (element.tagName === 'BUTTON' ||typeof element.className !== 'string' ||(typeof element.className === 'string' && element.className.includes('sidebar-container')) ||(typeof element.className === 'string' && element.className.includes('navbar')) ||(typeof element.className === 'string' && element.className.includes('tags-view-container')) ||(typeof element.className === 'string' && element.className.includes('operation-bar')) ||element.tagName === 'svg') {return true}return false}}).then((canvas) => {// 未生成pdf的html页面高度var leftHeight = canvas.heightvar a4Width = 576var a4Height = 772.89 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277// 一页pdf显示html页面生成的canvas高度;var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)// pdf页面偏移var position = 0var pageData = canvas.toDataURL('image/jpeg', 1.0)var pdf = new jsPDF('p', 'pt', 'a4') // A4纸，纵向// pdf.addFont('simkai-normal.ttf', 'simkai', 'normal')// pdf.setFont('simkai')// pdf.setFontSize(20)var canvas1 = document.createElement('canvas')var heightpdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')function createImpl(canvas) {if (leftHeight > 0) {var checkCount = 0if (leftHeight > a4HeightRef) {var i = position + a4HeightReffor (i = position + a4HeightRef; i >= position; i--) {var isWrite = truefor (var j = 0; j < canvas.width; j++) {var c = canvas.getContext('2d').getImageData(j, i, 1, 1).dataif (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {isWrite = falsebreak}}if (isWrite) {checkCount++if (checkCount >= 10) {break}} else {checkCount = 0}}height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)if (height <= 0) {height = a4HeightRef}} else {height = leftHeight}canvas1.width = canvas.widthcanvas1.height = heightvar ctx = canvas1.getContext('2d')ctx.drawImage(canvas,0,position,canvas.width,height,0,0,canvas.width,height)if (position !== 0) {pdf.addPage()}pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0),'JPEG',10,40,a4Width,(a4Width / canvas1.width) * height)leftHeight -= heightposition += heightif (leftHeight > 0) {setTimeout(createImpl, 500, canvas)} else {pdf.save(fileName + '.pdf')// 下载完成后改变浏览器界面可视区域高度node.style.height = clientH + 'px'}}node.style.height = 'initial'downloadLoadingInstance.close()}// 当内容未超过pdf一页显示的范围，无需分页if (leftHeight < a4HeightRef) {pdf.addImage(pageData,'JPEG',10,40,a4Width,(a4Width / canvas.width) * leftHeight)pdf.save(fileName + '.pdf')// 下载完成后改变浏览器界面可视区域高度node.style.height = clientH + 'px'} else {try {pdf.deletePage(0)setTimeout(createImpl, 500, canvas)} catch (err) {console.log('err', err)}}node.style.height = 'initial'downloadLoadingInstance.close()})
}

使用的时候直接引入

import { exportPDF } from './exportPDF'

exportPdf() {if (this.drChange) {exportPDF(`[${this.wakuGroup.grpWkMei}]_[${this.nen}年${this.textSeason}]${this.$moment().format('YYYYMMDDHHmmss')}`, this.$refs.collapse.$el)} else {exportPDF(`[${this.wakuGroup.grpWkMei}]_[${this.nen}年${this.textSeason}]_${this.$moment().format('YYYYMMDDHHmmss')}`, this.$refs.collapse.$el)}},