在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'"

把他写在要去打印的按钮上
写上就能打印了~

posted on 2019-06-21 15:12  JiAyInNnNn123  阅读(2291)  评论(0编辑  收藏  举报

导航