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>