Vue实现PDF导出和打印功能
1.在Vue页面上实现PDF导出和打印功能依赖于两个npm插件,分别为vue-to-pdf和vue-easy-printer。
安装命令:
npm i vue-to-pdf --save
npm i vue-easy-printer --save
2.这两个插件都可以页面局部打印和导出,先在想操作的dom节点上加入id和ref:
<div id="exportPdf" ref="exportPdf"> </div>
3.在按钮上加入点击事件:
<input type="button" @click="printPdf">打印</input> <input type="button" @click="savePdf" >导出(pdf)</input>
4.定义函数:
savePdf(){ this.$PDFSave(this.$refs.exportPdf, "我的文件"); }, printPdf(){ this.$easyPrint('exportPdf',"我的文件",'portrait'); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步