vue excel导入导出

Excel导出

依赖js-xlsx实现的

• 首先需要下载3个依赖包
  

npm install xlsx file-saver -S

npm install script-loader -S -D复制代码

• 在src目录下新建vendor文件夹，引入Blob.js和Export2Excel.js
  

• 可以happy的导出啦
  

1. 导出
   

   fileDown() {
       //引入文件　　　　　	
       import('../../../vendor/Export2Excel.js').then(excel => {
       const tHeader = ['数据元分类', '中文名称', '英文名称', '代码', '版本号', '发布日期'] //头部转换中文
       const filterVal = ['eltTypeValue', 'eltName', 'eltNameE', 'eltCode', 'eltVersion', 'createDate'] const list = this.dialogTabDataSel const data = this.formatJson(filterVal, list) excel.export_json_to_excel({
           header: tHeader,
           //导出头
           data,
           //导出数据
           filename: '数据元' //文件名
       })
   })
   },
   formatJson(filterVal, jsonData) {
       return jsonData.map(v = >filterVal.map(j = >v[j]))
   },
   
   复制代码

2. 导入

用了element-ui的Upload 上传组件，需接口校验上传的excle文件数据格式是否正确

<el-upload
  ref="upfile"
 :before-upload="beforeUpload"
  action=""
  accept=".xlsx, .xls"
  list-type="text"
 :on-remove="handleRemove"
 :limit="1"
 :on-exceed="handleExceed"
 :http-request="onSuccess">
  <el-button size="small" type="primary">选择</el-button>
</el-upload>复制代码

onSuccess(content){
        const fd = new FormData();
        fd.append('file', content.file)
        importElement(fd).then(response => {
          if(response.status == 'SUCCESS'){
	      this.$message({
 		message: '上传成功！',
 		type: 'success',
	     });
	this.fileImport = false;
	//清除文件
	this.handleRemove()
	}else if(response.status == '500'){
		this.$message.error('服务器异常');
	}else{
		this.$message.error(response.msg);
						
	}
       })
			
},         复制代码

项目要求 需要导出错误数据、以及错误原因，一开始接口把这个两种数据分开，我当时想到时分成两个工作簿，于是去度娘那逛了一圈，找了大佬代码改了改

export
function downloadExl(josnlist, type) {
    var json = JSON.parse(JSON.stringify(josnlist[0]));
    var templist = [];
    for (var i in josnlist) {
        var json = JSON.parse(JSON.stringify(josnlist[i]));
        var tmpdata = json[0];
        json.unshift({});
        var keyMap = []; //获取keys
        for (var k in tmpdata) {
            keyMap.push(k);
            json[0][k] = k;
        }
        var tmpdata = []; //用来保存转换好的json 
        json.map((v, i) = >keyMap.map((k, j) = >Object.assign({},
        {
            v: v[k],
            position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
        }))).reduce((prev, next) = >prev.concat(next)).forEach((v, i) = >tmpdata[v.position] = {
            v: v.v
        });
        templist.push(tmpdata)
    }
    var outputPos0 = Object.keys(templist[0]); //设置区域,比如表格从A1到D10
    var outputPos1 = Object.keys(templist[1]); //设置区域,比如表格从A1到D10
    var tmpWB = {
        SheetNames: ['errorMsg', 'errorList'],
        //保存的表标题
        Sheets: {
            'errorMsg': Object.assign({},
                templist[0], //错误信息描述
                {
                    '!ref': outputPos0[0] + ':' + outputPos0[outputPos0.length - 1] //设置填充区域
                }),
            'errorList': Object.assign({},
                templist[1], //错误信息内容
                {
                    '!ref': outputPos1[0] + ':' + outputPos1[outputPos1.length - 1] //设置填充区域
                }),

        }
    };
    var wbout = XLSX.write(tmpWB, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });
    var fileName = "问题数据" + newdate() + ".xlsx";
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), fileName)
}
复制代码