React实现数据导出为excel

2,429 阅读1分钟

前端导出表格的功能是稍微有点麻烦的,但是也是可以做的 juejin.cn/post/684490… 参考地

// 导出表格

p(s) {
    return s < 10 ? '0' + s : s
}
async ExportExcel(e) {
    // 获取本地时间
    const d = new Date()
    const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
    let Array = resDate.split("-")
    console.log(Array)
    let str = ""
    for(var i = 0 ; i<Array.length ; i++ ){
        str+=Array[i]
    }
    console.log(str)
    // let TimeLC = await ExcelDownload(str)
    // console.log(TimeLC)

    // 表格的处理
    let ArrayTH = []
    for (var i = 0; i < this.state.thdata.length; i++) {
        ArrayTH.push(this.state.thdata[i].fieldNameEn)
    }
    // const entozh = {
    //     "name": "姓名",
    //     "age": "年龄",
    //     "address": "地址"
    // }
    let entozh={}
    for(var i = 0 ; i<this.state.thdata.length ; i++){
        entozh[this.state.thdata[i].fieldNameEn]=this.state.thdata[i].fieldNameEn
    }
    console.log(entozh,"entozh")
    const nowdata = this.state.tddata;
    const json = nowdata.map((item) => {
        return Object.keys(item).reduce((newData, key) => {
            const newKey = entozh[key] || key
            newData[newKey] = item[key]
            return newData
        }, {})
    });
    const sheet = XLSX.utils.json_to_sheet(json);
    this.openDownloadDialog(this.sheet2blob(sheet, undefined), `全部信息.xlsx`);
}
openDownloadDialog = (url, saveName) => {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}
sheet2blob = (sheet, sheetName) => {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }); // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }

    return blob;
}
代码都有出处 我也是参考