js 将 数组 导出 到 excel ,点击 即可下载

用的xlsx 的库

先安装

yarn add xlsx

引用

import * as XLSX from 'xlsx';

具体 代码 (我这是react 写的 )

        <Button
          type={'primary'}
          style={{ marginLeft: 10 }}
          onClick={() => {
            // 构造数据
            let _data = [
              ['id', 'name', 'value'], //表头

              [1, 'sheetjs', 7262], // 每行数据

              [2, 'js-xlsx', 6969], // 每行数据
            ];
          
            let ws = XLSX.utils.aoa_to_sheet(_data); // 加到sheet 里面
            
            ws['!cols'] = [{ wch: 60 }, { wch: 20 }]; // 设置每列宽度


            /* generate workbook and add the worksheet */
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // sheet 加到文件里面

            let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }); //转换为二进制

            // 定义 应该二进制转 blob 的方法
            const s2ab = (s: any) => {
              let buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
              let view = new Uint8Array(buf); //create uint8array as viewer
              for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff; //convert to octet
              return buf;
            };

            // 创建一个a 标签 好下载
            const fileURL = window.URL.createObjectURL(
              new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),
            );
            const fileLink = document.createElement('a');

            fileLink.href = fileURL;
            fileLink.setAttribute('download', `test.xlsx`);
            document.body.appendChild(fileLink);

            fileLink.click();
          }}
        >
          数据导出
        </Button>

补充

如果 不想创建 点击 a 标签 下载 的话 ，有个npm的库 叫 file-saver (配套有 file-saver types ) 去npm 上面搜索

https://www.npmjs.com/package/file-saver

有这个 就 能直接 下载拉