生成二维码与 printJS 打印

最终效果：

1.生成二维码：

2.调用打印：

需求描述：

1.复选框选中数据，根据后端返回数据，生成二维码

2.调用本地打印，打印二维码。

解决代码：

生成二维码

1.html代码：

html 复制代码

    <div v-for="(item, index) in dataVueQr" :key="index" class="VueQr_details">
        <img :src="'data:image/png;base64,' + item.QRcode" alt="" class="VueQr_img" style="width: 245px; height: 245px">
    </div>

2.js代码

javascript 复制代码

for (let i = 0; i < this.dataVueQr.length; i++) {
    let blob = new Blob([this.dataVueQr[i].QRcode], { type: 'image/jpg' }) // 返回的文件流数据
    this.dataVueQr[i].textUrl = window.URL.createObjectURL(blob) // 将他转化为路径
}

dataVueQr为后端返回数据，如下图所示。

打印二维码

1.js代码

javascript 复制代码

// 打印二维码
printPDF() {
    const style = '@page {margin:5mm 20mm};'
    printJS('printJS_VueQr', 'html')
    printJS({
        //  设置打印区域id
        printable: 'printJS_VueQr',
        type: 'html',
        scanStyles: true,
        targetStyle: ['display', 'align-items', 'line-height', 'font-size'],
        style: `
            @page {
                margin:5mm 10mm
            }
            .VueQr_img {
                width: ${this.mmToPxData}px; 
                height: ${this.mmToPxData}px; 
                margin-bottom: 20px;
            }
        `,
        font_size: '20pt'
    })
},

// 毫米转像素点
mmToPx(value) {
    var inch = value / 25.4;
    var c_value = inch * this.getDPI()[0];
    return Math.floor(c_value);
},
// 取屏幕信息用作当前屏幕计算基本参数
getDPI() {
    let arrDPI = new Array;
    if (window.screen.deviceXDPI) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    } else {
        let tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);
    }
    return arrDPI;
}

1.printJS_VueQr：打印div的id。

2.this.mmToPxData = this.mmToPx(39) ，可根据需求更改参数

3.printJS：import printJS from 'print-js'

总结

生成二维码主要是后端返回文件流生成，边距和清晰度都是后端设置的，但是前端也可以动态计算。