PDF导出和打印功能-Vue

在Vue项目中实现pdf导出和打印功能依赖两个npm插件，分别为vue-to-pdf和vue-easy-printer，这两个插件都可以在页面局部打印和导出

1. 安装命令

npm i vue-to-pdf --save
npm i vue-easy-printer --save

2. 在main.js中引入

import vueToPdf from 'vue-to-pdf'
import VueEasyPrinter from 'vue-easy-printer'

Vue.use(vueToPdf)
Vue.use(VueEasyPrinter)

3. 在想要打印的dom节点上加入ref

<div id="exportPdf" ref="exportPdf"></div>

4. 在按钮上加入点击事件

<span class="export-button" @click="exportPdf">导出pdf</span>
<span class="export-second-button" @click="exportSecondPdf">导出pdf</span>

5. 定义函数

exportPdf() {      
    this.$PDFSave(this.$refs.exportPdf, "我的文件名")    
},
exportSecondPdf() {       
    this.$easyPrint('exportPdf',"我的文件名",'portrait')
    // $easyPrint方法的第三个参数还可以传landscape代表横向展示，portrait代表纵向展示
}