用于Vue项目中页面内容导出为PDF文件的 解决方案        在实际应用中，可能用户希望将系统中一个页面展示的所有数据报 表，用PDF的文件格式下载下来，以便于其他用途。但是在系统中应用 到的大部分可以绘制数据报表的插件或组件，只能做到将一个数据报表 以其他的文件形式（如：图片等）导出出来，无法将多个报表呈现在一 个文件中。本篇描述的就是，在Vue 2.0 的项目中，遇到类似的需求， 如何将需要的部分页面内容导出为PDF文件。 1.使用npm安装依赖 1 a.将html页面转换成图片 2 npm install ‐‐save html2canvas  3 b.将图片生成pdf 4 npm install jspdf ‐‐save 2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件，内容如下： 1 // 导出页面为PDF格式 2 import html2Canvas from 'html2canvas' 3 import JsPDF from 'jspdf' 4 export default{ 5   install (Vue, options) { 6     Vue.prototype.getPdf = function () { 7       var title = this.htmlTitle 8       html2Canvas(document.querySelector('#pdfDom'), { 9         allowTaint: true, 10         useCORS: true 11       }).then(function (canvas) { 12         let contentWidth = canvas.width 13         let contentHeight = canvas.height 14         let pageHeight = contentWidth / 592.28 * 841.89 15         let leftHeight = contentHeight 16         let position = 0 17         let imgWidth = 595.28 

18         let imgHeight = 592.28 / contentWidth * contentHeight 19         let pageData = canvas.toDataURL('image/jpeg', 1.0) 20         let PDF = new JsPDF('', 'pt', 'a4') 21         if (leftHeight < pageHeight) { 22           PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) 23         } else { 24           while (leftHeight > 0) { 25             PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHei ght) 26             leftHeight ‐= pageHeight 27             position ‐= 841.89 28             if (leftHeight > 0) { 29               PDF.addPage() 30             } 31           } 32         } 33         PDF.save(title + '.pdf') 34       } 35       ) 36     } 37   } 38 } 3.在main.js中注册我们自定义的插件htmlToPdf.js 1 import htmlToPdf from '@/utils/htmlToPdf' //引入页面转pdf 2 Vue.use(htmlToPdf) 4.在按钮上直接绑定getPdf()方法，即可实现导出功能 首先在我们要导出PDF的内容处加入id 1 2     //这里面的内容是我们要导出的部分 id为"pdfDom"，和上面"htmlToPdf.js"文件中 的id必须一致.此部分将就是pdf显示的部分 3