1. 最終的な効果
2. 実施方法
- 安装
qrcodejs2插件；
// 终端执行
npm install qrcodejs2 --save
- 対応する QR コード生成および印刷コンポーネントを作成する
コンポーネントコード:
<template>
<div id="qrCodeDiv" style="display:none;">
<!-- 使用css样式对生成的二维码打印时定义了分页 -->
<div v-for="(qrCode,index) in qrCodeList" :key="index" style="display: flex;justify-content: center;page-break-after:always;flex-direction: column;align-items: center;">
<!-- 这个div承载了每个二维码实例,必须定义 -->
<div :id="'qrCode'+ index"></div>
<!-- 自定义内容 -->
<div style="margin: 10px 0;">{
{qrCode.name}}({
{qrCode.code}})</div>
</div>
</div>
</template>
<script>
//引入插件
import QRCode from 'qrcodejs2'
export default {
data() {
return {
/* 二维码扫描出的访问地址 http://XXX */
url:"http://127.0.0.1/assets/preview?assetsId=",
/* 放置所有的二维码 */
qrCodeList:[]
}
},
methods:{
/* 父组件调用该方法传入对应的集合 */
printQrCode(qrCodeList){
//每次渲染前清除上一次渲染的二维码
for (let index = 0; index < this.qrCodeList.length; index++) {
const domId = "qrCode" + index;
document.getElementById(domId).innerHTML = "";
}
this.qrCodeList = qrCodeList;
this.$nextTick(() => {
//构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
var newWin = window.open(""); //新打开一个空窗口
let new_str = document.getElementById("qrCodeDiv").innerHTML;
newWin.document.body.innerHTML = new_str;
for (let index = 0; index < this.qrCodeList.length; index++) {
const id = this.qrCodeList[index].id;
this.qrCode('qrCode' + index,this.url + id);
this.qrCode(newWin.document.getElementById('qrCode' + index),this.url + id);
}
newWin.print(); //打印刚才新建的网页
newWin.close(); //打印或取消后关闭弹出的网页
})
},
/* 构建二维码 */
qrCode(id,content,w,h){
new QRCode(id, {
width: w || 124,
height: h || 124,
text: content // 二维码内容
// render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f', // 背景色
// foreground: '#ff0' // 前景色
})
}
}
}
</script>
- 親コンポーネント呼び出しメソッド
カプセル化したばかりのコンポーネントを親コンポーネントに導入し、登録します。 
コンポーネントを <template> タグに配置し、ref を定義します。
まず、対応する QR コード配列をアセンブルします。最終的にアセンブルされたデータ形式は次のとおりです。 a>
//可以根据自己的业务需求去改变结构，这个数组的作用主要是为了生成二维码时需要数据id拼接二维码访问地址
let qrCodeArr = [
{
id:328471,
name:"傲风电竞椅"，
code:"AOFU-001"
}，
{
....},
....
]
クリック イベントによりこのメソッドがトリガーされます
次に、ボタンを介してメソッドをバインドし、トリガーします。