vue element导入/导出excel

一、导入

这里提供的是前端解析文件，获取数据的方法

1. 导入依赖

 npm install -S file-saver xlsx
 npm install -D script-loader
 npm install xlsx

2. template代码

// 这里用的是element ui的组件，属性对应的用法可以去element官网自行查看
<el-upload style="display:inline-block;margin-left:10px" class="upload-demo"
     action="" ref="upload" :show-file-list='false' :on-change="handleChange" :limit="1"
     accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
     :auto-upload="false">
     <el-button size="mini" type="primary" icon='el-icon-download'>导入</el-button>
 </el-upload>

3. script代码

handleChange(file, fileList){
   this.fileTemp = file.raw;
    if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
        || (this.fileTemp.type == 'application/vnd.ms-excel')){
        this.importExcel(this.fileTemp);
    } else {
        this.$message({
            type:'warning',
            message:'附件格式错误，请重新上传！'
        })
        this.$refs.upload.uploadFiles =[]
    }
},
/**
 * 导入数据解析
 */
importExcel(obj) {
    let That = this;
    let inputDOM = this.$refs.inputer;
    this.file = event.currentTarget.files[0];
    var rABS = false; //是否将文件读取为二进制字符串
    var f = this.file;
    var reader = new FileReader();
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; 
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            var XLSX = require("xlsx");
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(binary)), {
                type: "base64"
                });
            } else {
                wb = XLSX.read(binary, {
                type: "binary"
                });
            }
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); 
            console.log(outdata)
            //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
            //此处可对数据进行处理
            let arr = [];
            outdata.map(item => {
                let obj = {}
                obj.goodsName = item['商品名称']
                obj.goodsTypeName = item['类型']
                obj.goodsRetailPrice = item['零售价']
                obj.goodsStock = item['库存']
                obj.goodsCreate = item['商品添加时间']
                arr.push(obj)
            });
            That.importData(arr)
        };
        reader.readAsArrayBuffer(f);
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
},
importData(e){
	//向后端传数据
}

二、导出

1. 导入依赖

 npm install -S file-saver xlsx
 npm install -D script-loader
 npm install xlsx
 

还有两个必要的js文件点击下载

2. template代码

<el-button type="primary" size="mini" icon="el-icon-upload2" @click="ExportExcel()">导出</el-button>

3. List item

/**
 * 获取全部数据
 */
ExportExcel(){
   // 接口，获取要导出的数据
   this.frontEndExportExcel(list)//list就是要导出的数据
},
/**
 * 导出数据
 * @method frontEndExportExcel
 * @param {array} e 需要导出的数据
 */
frontEndExportExcel(e) {
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../vendor/export2Excel');//你下的两个js文件之一，放到项目里引入
        // 设置Excel的表格第一行的标题
        const tHeader = ['商品名称', '类型', '零售价','库存','商品添加时间'];
        // 配置table中对应的字段index、code、name、time、remarks
        const filterVal = ['goodsName', 'goodsTypeName', 'goodsRetailPrice','goodsStock','goodsCreate'];
        // index、code、name、time、remarks是tableData里对象的属性
        const list = e; // 把要导出的数据放在这里
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '商品'); // '商品'就是导出的文件的名字
    });
},
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]));
}