Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等

本文主要是介绍Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果预览：

代码流程：首先在utils文件夹下创建htmlToPdf的js工具文件，然后在main.js中注册引用

htmlToPdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'export default {install(Vue, options) {Vue.prototype.getPdf = function (id) {var title = '导出试卷'if (id === null || id === undefined) {id = '#pdfDom'}html2Canvas(document.querySelector(id), {allowTaint: true,}).then(function (canvas) {const contentWidth = canvas.widthconst contentHeight = canvas.heightconst pageData = canvas.toDataURL('image/jpeg', 1.0)const pdfX = contentWidthconst pdfY = contentHeight // 500为底部留白const imgX = contentWidthconst imgY = contentHeight // 内容图片这里不需要留白的距离const PDF = new JsPDF('', 'pt', [pdfX, pdfY])PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)PDF.save(title + '.pdf')})}Vue.prototype.getPdfByIds = function (pages) {var title = '导出试卷'let params = []let PDF = nulllet imgs = document.querySelectorAll('img')for (let img of imgs) {img.setAttribute('crossorigin', '*')}let parentNode = document.querySelector(pages)let promises = []for (let i = 0; i < parentNode.childNodes.length; i++) {let promise = new Promise((res, rej) => {let pageIndex = ihtml2Canvas(document.querySelector('#' + parentNode.childNodes[i].id),{allowTaint: true,// useCORS: true,}).then(function (canvas) {const contentWidth = canvas.widthconst contentHeight = canvas.heightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let pdfWidth = contentWidthlet pdfHeight = contentHeight // 500为底部留白let imgX = contentWidthlet imgY = contentHeight // 内容图片这里不需要留白的距离params.push({pageIndex: pageIndex,pageData: pageData,pdfWidth: pdfWidth,pdfHeight: pdfHeight,})res(PDF)}).catch((e) => {console.log('报错', e)})})promises.push(promise)}Promise.all(promises).then((val) => {params.sort(function (a, b) {let index1 = a['pageIndex']let index2 = b['pageIndex']return index1 - index2 //正序})let i = 0for (let param of params) {i++console.log('param', param)let pdfWidth = param['pdfWidth']let pdfHeight = param['pdfHeight']let pageData = param['pageData']if (PDF === null) {PDF = new JsPDF('', 'pt', [pdfWidth, pdfHeight])} else {PDF.addPage()}PDF.addImage(pageData, 'jpeg', 0, 0, pdfWidth, pdfHeight)}if (params.length == parentNode.childNodes.length) {PDF.save(title + '.pdf')}})}Vue.prototype.getPdfByIdsB = function (pages) {var title = '导出试卷'let params = []let PDF = nulllet imgs = document.querySelectorAll('img')for (let img of imgs) {img.setAttribute('crossorigin', '*')}let parentNode = document.querySelector(pages)let promises = []for (let i = 0; i < parentNode.childNodes.length; i++) {let promise = new Promise((res, rej) => {let pageIndex = ihtml2Canvas(document.querySelector('#' + parentNode.childNodes[i].id),{allowTaint: true,useCORS: true,}).then(function (canvas) {const contentWidth = canvas.widthconst contentHeight = canvas.heightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let pdfWidth = contentWidthlet pdfHeight = contentHeight // 500为底部留白let imgX = contentWidthlet imgY = contentHeight // 内容图片这里不需要留白的距离params.push({pageIndex: pageIndex,pageData: pageData,pdfWidth: pdfWidth,pdfHeight: pdfHeight,})res(PDF)}).catch((e) => {console.log('报错', e)})})promises.push(promise)}Promise.all(promises).then((val) => {params.sort(function (a, b) {let index1 = a['pageIndex']let index2 = b['pageIndex']return index1 - index2 //正序})let i = 0for (let param of params) {i++console.log('param', param)let pdfWidth = param['pdfWidth']let pdfHeight = param['pdfHeight']let pageData = param['pageData']if (PDF === null) {PDF = new JsPDF('', 'pt', [pdfWidth, pdfHeight])} else {PDF.addPage()}PDF.addImage(pageData, 'jpeg', 0, 0, pdfWidth, pdfHeight)}if (params.length == parentNode.childNodes.length) {PDF.save(title + '.pdf')}})}},
}

在main.js中注册引用,挂载全局即可使用

import htmlToPdf from './utils/htmlToPdf'
Vue.use(htmlToPdf)

下载方法中，使用即可，#app为最外层父级元素id名称

//下载downloadPapaers() {Vue.prototype.getPdfByIdsB('#app')},

这篇关于Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---