vue 使用qrcodejs2生成二维码及打印功能实现

最近项目中遇到需要 根据用户名打印出二维码显示出来 最后自己研究琢磨实现了对应功能，现分享出来，写了一个简单的实例功能 供后期参考及大家一起学习探讨。本文二维码生成采用的是的: qrcodejs2，需要的可以参考下。

1. 先看下实现效果：点击打印，生成二维码并打印效果

2. npm 引入qrcodejs2包文件

npm install qrcodejs2 --save

3. 在对应的vue界面引入qrcode

import QRCode from 'qrcodejs2';

4. vue 完整页面（核心代码都有注释，很简单，尽量简化的内容已经简化了）

<template>
    <div class>
        <div id="qrcode2" ref="qrcode2">div>
        <div>18682425482div><hr/>
        <div>张三div><hr/>
        <button @click="printQcode">打印button>
    div>
template>

<script>
// 引入qrcodejs2
import QRCode from 'qrcodejs2';

export default {
    data() {
        return {};
    },
    //方法集合
    methods: {
        printQcode() {
            let qrCode = 18682425482;
            let employeeName = "张三";
            let printContent = `
                    

                    

                        ${employeeName}
                    
                `;
            document.getElementById("qrcode2").innerHTML = printContent;
            let new_str = document.getElementById("qrcode2").innerHTML; //获取指定打印区域
            //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
            document.body.innerHTML = new_str;
            for (let j = 0; j < 1; j++) {
                document.getElementById("XQ").innerHTML = ""; //置空
                new QRCode(document.getElementById("XQ"), {
                    text: qrCode,
                    width: 250,
                    height: 250,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                });
            }
            window.print(); //打印刚才新建的网页
            window.location.reload();
            return false;
        },
    },
};
script>
<style lang='less' scoped>
style>

到此，整个生成二维码并打印的功能就基本上实现了，如果解决了你的问题，点个赞在走呗