网站开发团队需要哪些,网站建设共享,兼职 做网站,国内网站备案效果预览#xff1a; 代码流程#xff1a;首先在utils文件夹下创建htmlToPdf的js工具文件#xff0c;然后在main.js中注册引用
htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from html2canvas
import JsPDF from jspdfexport default {install(Vue, options) {V…效果预览 代码流程首先在utils文件夹下创建htmlToPdf的js工具文件然后在main.js中注册引用
htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from html2canvas
import JsPDF from jspdfexport 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) {iconsole.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) {iconsole.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)},
