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'); }