在VUE中实现打印

1.安装

npm install vue-print-nb --save

2.在mian.js中引入

import Print from 'vue-print-nb'
Vue.use(Print); 

3.在页面中使用

<el-dialog title="打印页面" :visible.sync="dialogVisible" width="40%" :loading="loading" size='small' @open="dialogOpen">
     <div style="width:500px">
       <img  id="printTest" :src="printImg" style="width:100%;  height:auto;" >
     </div>  
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="print" v-print="'#printTest'">去打印</el-button>
    </span>
  </el-dialog>

在图中的
id="printTest"
v-print="'#printTest'"
来补充一下打印的截图

点击去打印

点击打印后出现的页面

由于有别的信息所以打印显示的页面我只截取了左侧部分，右侧部分就是正常的打印的信息~