vue中excel导入导出

安装

npm install xlsx

官网：https://github.com/sheetjs/sheetjs

导出

html

<a-button type="primary" @click="downloadTemplate" >
      <a-icon type="upload" /> 导出
</a-button>

js

var defaultJson=[
    { GroupName:"群组1",Description:"无描述",ShiftA:"张三",ShiftB:"张站",ShiftC:"张啊啊"},
    { GroupName:"群组2",Description:"无描述",ShiftA:"张感到",ShiftB:"张大公",ShiftC:"张啊"},
]

import XLSX from 'xlsx'
export default {
        methods: {

downloadTemplate() {
    var filename = "testExportFile.xlsx"; //文件名称
    let orgData=defaultJson,
        arrJson = [{
           GroupName: "名称",
           Description: "描述",
           ShiftA: "A班",
           ShiftB: "B班",
           ShiftC: "C班",
         }];
    orgData.map(it => {
         arrJson.push(it);
    })
     var wb = XLSX.utils.book_new(),
         ws = XLSX.utils.json_to_sheet(arrJson,{skipHeader: true});//输出行则不包括标题
     XLSX.utils.book_append_sheet(wb, ws, "Sheet1");  //将数据添加到工作薄
     XLSX.writeFile(wb, filename); //导出Excel
},
        }
    }

导入

html

<a-button type="primary" @click="uploadClick" >
   <a-icon type="upload" /> 导入
</a-button>
<input type="file" ref="uploadFile" v-show="false" accept=".xls,.xlsx,.csv" name="file" @change="uploadChange" />

js

import XLSX from 'xlsx'
export default {
        methods: {

uploadClick() {
   this.$refs.uploadFile.click();
},
uploadChange(event) {
    if (!event.target.files.length) {
        return;
    }
    var f = event.target.files[0];
    // 用FileReader来读取
    var reader = new FileReader();
    var outdata; // 你需要的数据

    FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";     
        var wb; // 读取完成的数据
        var formatArr=[]; //可能需要不同内容字段
        var reader = new FileReader();
        reader.onload = function () {
            // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            // 接下来就是xlsx了，具体可看api
            wb = XLSX.read(binary, {
                type: "binary"
            });

            const sheet2JSONOpts={
                /** Default value for null/undefined values */
                defval: ''//给defval赋值为空的字符串
            }

            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], sheet2JSONOpts);
            console.log('excel', outdata);//打印你的数据
              event.srcElement.value = "";//清空，防止二次点击不触发浏览器事件
        }

       reader.readAsArrayBuffer(f);
    };
    reader.readAsBinaryString(f);
},


        }
    }

 

该组件还支持

写入：

• aoa_to_sheet 将JS数组的数组（[ [...],[...],[...] ]）转换为工作表
• json_to_sheet 将json对象数组转换为工作表
• table_to_sheet 将DOM TABLE元素转换为工作表
• sheet_add_aoa 将JS数据数组添加到现有工作表中
• sheet_add_json 将json对象数组添加到现有工作表中

读取：

• sheet_to_json 将工作表对象转换为JSON对象数组
• sheet_to_csv 将工作表转换成csv
• sheet_to_txt 生成UTF16格式的文本
• sheet_to_html 生成HTML输出
• sheet_to_formulae 生成公式列表（具有值回退）