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'"
來補(bǔ)充一下打印的截圖
點擊去打印
點擊打印后出現(xiàn)的頁面
由于有別的信息所以打印顯示的頁面我只截取了左側(cè)部分洼裤，右側(cè)部分就是正常的打印的信息~
