elementui 打印 二维码

html

        <div id='print_btn'>
            <el-select v-model="value" placeholder="请选择打印二维码的尺码" @change="getUrl">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-printer" @click='doPrint'>打印</el-button>
        </div>
        <div id='meal_code'>
            <div id="url_item"></div>
        </div>

js

      data(){
            value:'',
            options: [{
                    value: '256',
                    label: '256 * 256'
                }, {
                    value: '400',
                    label: '400 * 400'
                }, {
                    value: '500',
                    label: '500 * 500'
                }],
            url:'',
      },
      mounted(){
            this.value='256';
            this.getUrl();
        },
      methods:{
            // 打印 按钮
            doPrint() {
                document.getElementById("print_btn").style.display = "none";
                window.print();
                document.getElementById("print_btn").style.display = "block";
            },
            getUrl:function(){
                var url_item= document.getElementById("url_item");
                url_item.innerHTML="";
                new getUrl(document.getElementById("url_item"), {
                    text: this.url,
                    width: this.value,
                    height: this.value,
                    correctLevel: getUrl.CorrectLevel.L
                });
                $('img').css({ "margin-left": -this.value / 2, "position": "relative", "left": "50%" });//设置二维码显示样式
                return false;
            },
      }
posted @ 2020-12-03 17:57  JaneLifeVlog  阅读(625)  评论(0)    收藏  举报