基于VUE实现导出PDF功能

目前有两种方法,
1.使用插件(jspdf+html2canvas);
2.用window.print()方法。

介于第二种方法在目前的JIVF框架中可实现性不高,推荐用第一种方法
使用插件这个套路我们并不陌生,首先
1.下载插件
npm install html2canvas jspdf --save-dev
命令运行完后,无报错的情况下会在node_modules下生成相应的文件夹并更新package.json文件。
2.编写导出pdf方法
建议写在公共方法中,后续能重复调用。
基于VUE实现导出PDF功能
下面直接贴图解析代码:
基于VUE实现导出PDF功能
基于VUE实现导出PDF功能
基于VUE实现导出PDF功能
3.定义需要导出的dom元素
在vue文件中的template标签中定义需要导出的dom元素。本例采用id选择器,将id为demo的div及其内部元素全部导出为pdf。
基于VUE实现导出PDF功能
4.调用导出方法
基于VUE实现导出PDF功能
上面四步就能实现导出pdf功能啦,建议在导出的时候加下加载条,或者友好的提示告诉用户在下载中,因为前台导出需要时间~