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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM