vue生成二維碼+打印分頁實現

首先安裝依賴

-- 安裝生成二維碼
npm i qrcodejs2 --save
-- 安裝打印
npm i vue-print-nb--save

配置main.js

import Print from 'vue-print-nb'

Vue.use(Print); //註冊

生成二維碼代碼

var qrcode = new QRCode("test", {
    text: "http://jindo.dev.naver.com/collie",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

打印

<div id="printTest" >
　　<p>這裏面是要打印的內容</p>　　　
</div>
<button v-print="'#printTest'">打印</button>

打印分頁+二維碼渲染

<div id="printTest">
    <div style="page-break-after:always;display: flex;justify-content: center;align-items: center" v-for="n in 3">
        <p>這裏面是要打印的內容</p>
        <div :id="'item'+n"></div>
    </div>
</div>
<el-button v-print="'#printTest'">打印</el-button>



methods: {
    getQrCode() {
        this.$nextTick(function () {
                for (let i = 1; i < 4; i++) {
                    new QRCode(document.getElementById('item' + i), {
                        text: 'http://192.168.190.163:8082/#/check/checkResult?name=測試&id=id',
                        width: 240,
                        height: 240,
                        colorDark: "#333333", //二維碼顏色
                        colorLight: "#ffffff", //二維碼背景色
                        correctLevel: QRCode.CorrectLevel.L//容錯率，L/M/H
                    })
                }
            }
        );
    }
},
mounted() {
    this.getQrCode();
}

效果

共3頁面