介绍下把表格的内容转换成excel文件并下载

比如这样的一个表格，怎么通过button下载成excel，其实就是表格数据的一个运用哈~

1、首先准备数据(就用官网的吧)：

interface tData {

    key: string;

    name: string;

    age: number;

    address: string;

    tags: string[];

}
const tableData: Array<tData> = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], },];

2、准备一个页面的Button

<Button type="primary" onClick={exportData} style={{margin: 20}}>导出数据</Button>

3、对data数据做些处理

install下xlsx

npm install xlsx

最开始引入下xlsx

import XLSX from 'xlsx';

exportData函数

function exportData() {

    // 第一行各单元格标题

    const entozh: any = {

        name:"Name",

        age:"Age",

        address:"Address"

    };

    // 需要处理的数据

    const nowdata: Array<tData> = tableData;

    const json = nowdata.map((item: any) => {

        return Object.keys(item).reduce((newData: any, key: string) => {

            const newKey = entozh[key] || key;

            newData[newKey] = item[key];

            return newData

        }, {})

    });

    // XLSX.utils.json_to_sheet(json) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，默认的列顺序由使用Object.keys的字段的第一次出现确定

    const sheet = XLSX.utils.json_to_sheet(json);

    openDownloadDialog(sheet2blob(sheet,undefined), `导出数据.xlsx`);

}

sheet2blob函数

function sheet2blob(sheet: any, sheetName: any) {

    sheetName = sheetName || 'sheet1';

    const workbook: any = {

        SheetNames: [sheetName],

        Sheets: {}

    };

    // 生成excel的配置项，将数据放入对象workbook的Sheets中等待输出 

    workbook.Sheets[sheetName] = sheet;

    const wopts: any = {

        bookType: 'xlsx', // 要生成的文件类型

        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性

       type: 'binary'

    };

    function s2ab(s: any) {

        const buf = new ArrayBuffer(s.length);

        const view = new Uint8Array(buf);

        for (let i = 0; i !== s.length; i += 1) view[i] = s.charCodeAt(i) & 0xFF; return buf;

    }

    const wbout = XLSX.write(workbook, wopts);

    // 字符串转ArrayBuffer

    const blob = new Blob([s2ab(wbout)], {

        type: "application/octet-stream"

    });

    return blob;

}

openDownloadDialog函数

function openDownloadDialog(url: any, saveName: string) {

    if (typeof url === 'object' && url instanceof Blob) {

        url = URL.createObjectURL(url); // 创建blob地址

    }

    const aLink: HTMLAnchorElement = document.createElement('a');

    aLink.href = url; aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效

    let 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);

}

点击

就可以了