在Vue页面上实现PDF导出和打印功能依赖于两个npm插件,分别为vue-to-pdf和vue-easy-printer。
安装命令:
npm i vue-to-pdf --save
npm i vue-easy-printer --save
在main.js/App.js中加入引用:
import vueToPdf from 'vue-to-pdf';
import VueEasyPrinter from 'vue-easy-printer';
Vue.use(vueToPdf);
Vue.use(VueEasyPrinter);
这两个插件都可以页面局部打印和导出,先在想操作的dom节点上加入id和ref:
<div id="exportPdf" ref="exportPdf">
</div>
然后在按钮上加入点击事件:
<input type="button" @click="printPdf">打印</input>
<input type="button" @clic