SOURCE

new Vue({
    el:'#app',
    data:function(){
        return {
            tabHeads:[],
            qrcodes:[],
            memo:'',
            canvas:{   //画布
                width:400,
                height:200,
                canvasBg:'#fff',
                canvasBorder:[0,'#fff'], //边框
                qrcode:{  //二维码
                    width:200,
                    height:200
                }
            }
        }
    },
    methods:{
        uploadFile(e){
            let self = this;
            let files = e.target.files;
            if(0 == files.length) return ;
            let file = files[0];
            if(!/\.xlsx$/g.test(file.name)) {
                self.$message.error('错了哦，这是一条错误消息');
                return;
            }
            self.readWorkbookFromLocalFile(file);
        },
        //读取本地excel文件
        readWorkbookFromLocalFile(file){
            let self = this;
            let reader = new FileReader();
            reader.onload = function(e) {
                let data = e.target.result;
                let workbook = XLSX.read(data, {type: 'binary'});
                self.readWorkbook(workbook);
            };
            reader.readAsBinaryString(file);
        },
        //处理文件
        readWorkbook(workbook){
            let self = this;
            let sheetNames = workbook.SheetNames; // 工作表名称集合
            let worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
            let csv = XLSX.utils.sheet_to_csv(worksheet);
            let rows = csv.split('\n');

            let head = rows.shift(); //编辑表格头部
            self.tabHeads = self.getTabHeah(head);

            rows.pop(); // 最后一行没用的
            self.qrcodes = self.getTabBody(rows);

            //生成二维码
            self.creatQrcode();
        },
        //获取表头部
        getTabHeah(head){
            let arr = head.split(',');
            let headrs = [];
            headrs = arr.map((val,ind)=>{
                return {prop:'key'+ind,label:val}
            });
            return headrs;
        },
        //获取表数据
        getTabBody(rows){
            let self = this;
            let arr = [];
            rows.forEach(val=>{
                let brr = val.split(",");
                let obj = {};
                brr.forEach((v,i)=>{
                    obj['key'+i] = v;
                    obj['label'+i] = self.tabHeads[i].label;
                })
                obj['qrcode'] = '';
                obj['synthesis'] = '';
                obj['isMome'] = true;
                arr.push(obj);
            })
            return arr;
        },
        //生成二维码
        creatQrcode(){
            let self = this;
            let opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                width:200,
                rendererOpts: {
                    quality: 0.5
                }
            }
            let arr = [];
            self.qrcodes.forEach(val=>{
                QRCode.toDataURL(val['key0'], opts , function (err, url) {
                    if (err) throw err;

                    val.qrcode = url;
                    arr.push(val);
                })
            })
            self.qrcodes = arr;
        },
        //合成二维码
        synthesisQrcode(){
            let self = this;
            let promises = self.qrcodes.map(val=>{
                return qrcodeSynthesis(val,self.canvas);
            })

            let arr = [];
            Promise.all(promises).then(function (urls) {
                self.qrcodes = self.qrcodes.map((v,i)=>{
                    v.synthesis = urls[i];
                    return v;
                })
            })
        },
        //编辑内容
        handleEdit(item){
            this.memo = item;
        },
        //保存内容
        handleSave(item){
            console.log(item)
        },
        clearData(){
            this.qrcodes = [];
            this.tabHeads = [];
        },
        //下载二维码
        downloadQr(item){
            this.downloadImg({ url:item.qrcode, name:item['key0']+'.png'});
        },
        //下载合成二维码
        downloadSynthesis(item){
            this.downloadImg({ url:item.synthesis, name:item['key0']+'.png'});
        },
        downloadImg(obj){
            let aDom = document.createElement('A');
            aDom.href = obj.url;
            aDom.download = obj.name;
            aDom.target = "_blank";
            document.body.appendChild(aDom);
            aDom.click();
            document.body.removeChild(aDom);
        },
        //批量下载二维码
        downloadQrBatch(){
            let self = this;
            self.qrcodes.forEach(val=>{
                self.downloadQr(val);
            })
        },
        //批量下载合成二维码
        downloadSynthesisBatch(){
            let self = this;
            self.qrcodes.forEach(val=>{
                self.downloadSynthesis(val);
            })
        }
    }

})

<div id="app">
		<h3>资产管理二维码生成</h3>
		<div class="opear"  v-cloak>
			<el-button type="primary" class="upload-btn">上传xlsx文件
				<input type="file" class="upload-xlsx" @change="uploadFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
			</el-button>
			<el-button type="primary" @click="synthesisQrcode">批量合成二维码</el-button>
			<el-button type="primary" @click="downloadQrBatch">批量下载二维码</el-button>
			<el-button type="primary" @click="downloadSynthesisBatch">批量下载合成二维码</el-button>
			<el-button type="primary" @click="clearData">清空数据</el-button>
		</div>
		<div class="table-box">
			<template>
				<el-table
						:data="qrcodes"
						border
						style="width: 100%">
					<el-table-column
							v-for="(head,index) in tabHeads"
							:key="index"
							:prop="head.prop"
							:label="head.label"
							width="180">
						<template slot-scope="scope">
							<span>{{scope.row[head.prop]}}</span>
						</template>
					</el-table-column>
					<el-table-column
							prop="qrcode"
							label="二维码">
						<template slot-scope="scope">
							<img :src="scope.row.qrcode">
						</template>
					</el-table-column>
					<el-table-column
							prop="synthesis"
							label="合成二维码">
						<template slot-scope="scope">
							<img v-if="scope.row.synthesis" :src="scope.row.synthesis">
						</template>
					</el-table-column>
					<el-table-column
							label="下载">
						<template slot-scope="scope">
							<el-button type="primary" @click="downloadQr(scope.row)">二维码</el-button>
							<el-button type="primary" @click="downloadSynthesis(scope.row)">合成二维码</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
	</div>

*{
    margin: 0;
    padding: 0;
}
[v-cloak] {
    display: none;
}
#app h3{
    font-size: 30px;
    text-align: center;
}
.opear{
    margin: 30px 0;
    text-align: center;
}
.upload-btn{
    position: relative;
    overflow: hidden;
}
.upload-xlsx{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}