1.前言
需求是将项目中的一些图标或数据以PDF的格式下载下来，并且要求样式好看，且格式按照需求调整
2.效果图部分截图举例
3.步骤
3.1 下载插件
1. npm install --save html2canvas 2. npm install jspdf --save
3.2 src/utils目录下新建jsPdf.js文件，将以下代码粘贴进去
// 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install (Vue) { Vue.prototype.getPdf = function () { var title = this.htmlTitle html2Canvas(document.querySelector('#pdfDom'), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') 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') } ) } } }
3.3 main.js 文件里引入，并注册
1. Vue.use(htmlToPdf) 2. Vue.use(VueContextMenu)
3.4 在要导出的页面添加id和点击事件
data () { return { htmlTitle: '页面导出PDF文件名',//htmlTitle代表导出文件名 } }, methods: { downloadPdf () { this.getPdf() } },
至此，完成导出功能
4.一些问题和解决方式
4.1 模糊问题
据说这个插件会导致模糊现象，但是我感觉还是挺清楚的。
4.2 分页问题
再一个就是，分页问题，具体来说就是比如一个图可能上一页有一半，另一半在下一页，这样就不好了。我得解决方式就是使用margin和padding来调整布局，经过在三台不同分辨率不同屏幕大小下实测，均正常。
