生成二维码，并且打印出来

加入依赖

//二维码依赖
npm install --save qrcodejs2
//打印依赖
npm install vue-print-nb --save

在mian文件夹中使用引入并使用，或者按需引入


//打印依赖
import Print from 'vue-print-nb'
Vue.use(Print)

本次二维码是按需引入
参考代码

<template><div><div><el-input size="mini" v-model="text" style="width:250px" clearable></el-input><el-button size="mini" @click="qrcode">生成</el-button><el-button type="primary" size="mini" v-print="printObj">打印</el-button><p style="display:flex;margin-bottom:20px">以下为打印内容：</p><div id="qrcodeAll" class="qrcodeAll"><table border="1" cellpadding="23"><tr><th>表头1</th><th>表头2</th></tr><tr><td>这是二维码</td><td><div ref="qrcode" id="qrcode"></div></td></tr></table></div></div></div>
</template>
<script>
// 按需引入
import QRCode from "qrcodejs2";
export default {data() {return {text: "",printObj: {id: "qrcodeAll"//其他配置项，}};},created() {},methods: {qrcode() {this.$refs.qrcode.innerHTML = "";//为了替换第一个二维码而准备let qrcode = new QRCode("qrcode", {width: 100,height: 100, // 高度text: this.text // 二维码内容// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f'// foreground: '#ff0'});}}
};
</script><style lang="scss" scoped>
.qrcodeAll {table {th {padding: 10px 20px;}td{padding: 10px;}}
}
</style>