Vue项目导出|前端使用vue实现导出pdf word|pdf|vue|js|javascript|excel

vue实现导出pdf 使用html2canvas和jspdf插件实现这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件
这个方法有个非常不好的缺点

生成的pdf质量不高，画面有些模糊，失真严重
如果在分页的地方有图片的话，可能会把图片也给你一分为二了

大概就会是下面这样子，每次分页都会无情的给你隔开，管你是啥玩意

文章图片

1. 安装插件
先安装第一个 html2canvas 插件，这个作用是实现将 html 页面转换成图片
在你的控制住台输入下面指令

npm install --save html2canvas

然后再安装第二个插件，这个插件的作用是将图片转为 pdf
在你的控制住台输入下面指令

npm install jspdf --save

2. 创建 htmlToPdf.js 文件安装好了上面的两个插件后，在你的项目里创建一个js文件，项目里应该会有个专门放js文件的文件夹，其实你自己找地方放也可以，只要你能找到就行，把 js 文件的名字和我写的一样就行
然后记住你这个文件的路径列：(‘src/scripts/common/utils/htmlToPdf’)’
3. 在你创建的 htmlToPdf.js 文件里面写入以下代码直接全部赋值粘贴过去就好了

import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install (Vue, options) { Vue.prototype.getPdf = function (idStr, title) { html2Canvas(document.querySelector('#' + idStr), { // allowTaint: true, useCORS: true, // scale: 2, // 提升画面质量，但是会增加文件大小 }).then((canvas) => { const contentWidth = canvas.width const contentHeight = canvas.height // 一页pdf显示html页面生成的canvas高度; const pageHeight = contentWidth / 592.28 * 841.89 // 生成pdf的html页面高度 let leftHeight = contentHeight // 页面偏移 let position = 0 // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 const imgWidth = 595.28 const imgHeight = 592.28 / contentWidth * contentHeight // canvas.crossOrigin="anonymous"; const pageData = https://www.it610.com/article/canvas.toDataURL('image/jpeg', 1.0)const 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(title + '.pdf') }) } }, }

4. 上面不是说到了分页的话会把图片给咔嚓开嘛，然后下面的代码是不分页的，直接复制到 js 文件里就好

import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install (Vue, options) { Vue.prototype.getPdf = function (idStr, title) { html2Canvas(document.querySelector('#' + idStr), { // allowTaint: true, useCORS: true, // scale: 2, // 提升画面质量，但是会增加文件大小 }).then((canvas) => { const contentWidth = canvas.width const contentHeight = canvas.height/* 导出不分页处理 */ const pageData = https://www.it610.com/article/canvas.toDataURL('image/jpeg', 1.0)const pdfWidth = (contentWidth + 10) / 2 * 0.75 const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白const imgWidth = pdfWidth const imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离const PDF = new JsPDF('', 'pt', [ pdfWidth, pdfHeight, ]) PDF.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight) PDF.save(title + '.pdf') }) } }, }

5. 在项目文件中的 main.js 里面引入，并注册把这两行代码复制到min.js里