vue + element ui 打印

使用方式

安裝 npm install vue-print-nb --save

 

在main.js文件中注冊

import Print from 'vue-print-nb'

Vue.use(Print);

 

1.對象打印方式

<div>
 <div id="printMe">
 <div class="goodsStyle demo-flex">
 <span class="orderStyle goodsInfos" style="font-size:26px;color: #000;font-weight: 600;">{{goodsInfo.productName}}</span>
 </div>
 </div>
 <div style="text-align: center;margin-top: 20px">
 <el-button size="small" ref="btn" type="primary" class="printObjDy" @click="handleprint(printObj)" v-print="printObj">打 印</el-button>
 </div>
</div>

export default {
    name: "index",
 data() {
 return {
 printObj: {
 id: "printMe",
 popTitle: '訂單',
 extraCss: '',
 extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
 }
 }
 },
 mounted() { 
 setTimeout(() => {
 this.$refs.btn.$el.click()
 }, 1000)

 },
 created() {
 this.handleprint(); 
 },
 methods: {
 handleprint(val) {
 console.log(val)
 console.log(111)
 },
 }
}

上面是對象打印方式，紅色字體是必須要的，  id="printMe"  下的內容是需要打印出來的內容，上面代碼實現的功能是默認打開打印預覽框，打印出的樣式最好寫行內樣式，不然識別不了樣式

 

 

2.id打印方式

<div id="printDiv">打印的內容</div>

<button v-print="'#printDiv'">打印</button>