react 选中表格的数据，导出zip文件

 具体配置，请查看文档：jszip()用法介绍：压缩和解压缩JavaScript文件和目录

直接上代码： index.jsx

import React, { Component } from 'react'
import { Table, Tag, Button, Input, message, Row, Col } from "antd";

export default class index extends Component {
    constructor() {
        super();
        this.state = {
            selectedRows: [],
            selectedRowKeys: [],
            filename: 'file',
            list:[
                {
                    "id": 21,
                    "title": "结众放农国却条易相",
                    "author": "萧艳",
                    "readings": 2038,
                    "date": "1996-08-25 01:45:01",
                    "key": 0
                },
                {
                    "id": 22,
                    "title": "在离造好现",
                    "author": "贾强",
                    "readings": 4826,
                    "date": "2007-02-10 11:28:56",
                    "key": 1
                },
                {
                    "id": 23,
                    "title": "术分起角直传",
                    "author": "杜秀兰",
                    "readings": 4076,
                    "date": "1999-12-21 14:28:42",
                    "key": 2
                },
                {
                    "id": 24,
                    "title": "直世走规更段长方要强",
                    "author": "汪杰",
                    "readings": 4713,
                    "date": "2003-07-01 20:43:26",
                    "key": 3
                },
                {
                    "id": 25,
                    "title": "每商越消近始才自专",
                    "author": "傅秀英",
                    "readings": 1777,
                    "date": "1973-09-21 09:08:33",
                    "key": 4
                },
                {
                    "id": 26,
                    "title": "构真美求路须八",
                    "author": "冯桂英",
                    "readings": 3792,
                    "date": "2000-04-08 22:47:19",
                    "key": 5
                },
                {
                    "id": 27,
                    "title": "系始线级道安受王图他",
                    "author": "黎伟",
                    "readings": 3225,
                    "date": "1986-10-18 18:16:41",
                    "key": 6
                },
            ]
        };
    }
    //获取文件名
    filenameChange = (e) => {
        this.setState({
            filename: e.target.value,
        });
    };
    //导出事件
    handleDownload = (type) => {
      if(type === 'selected' && this.state.selectedRowKeys.length === 0) {
          message.error('至少选择一项进行导出');
          return;
      }
      import("./Export2Zip").then((zip) => {
        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
        const filterVal = ["id", "title", "author", "readings", "date"];
        const list = type === "all" ? this.state.list : this.state.selectedRows;
        const data = this.formatJson(filterVal, list);
  
        zip.export_txt_to_zip(
          tHeader,
          data,
          this.state.filename,
          this.state.filename
        );
        this.setState({
          selectedRowKeys: [], // 导出完成后将多选框清空
        });
      });
    }
    formatJson(filterVal, jsonData) {
        return jsonData.map((v) => filterVal.map((j) => v[j]));
      }
    render() {
        const columns = [
            {
                title: "Id",
                dataIndex: "id",
                key: "id",
                width: 300,
                align: "center",
            },
            {
                title: "Title",
                dataIndex: "title",
                key: "title",
                width: 300,
                align: "center",
            },
            {
                title: "Author",
                key: "author",
                dataIndex: "author",
                width: 200,
                align: "center",
                render: (author) => <Tag key={author}>{author}</Tag>,
            },
            {
                title: "Readings",
                dataIndex: "readings",
                key: "readings",
                width: 300,
                align: "center",
            },
            {
                title: "Date",
                dataIndex: "date",
                key: "date",
                width: 300,
                align: "center",
            },
        ];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows,
                    selectedRowKeys
                })
            },
        };
        return (
            <div>
                <Row>
                    <Col>
                        <span>文件名：</span>
                        <Input
                            style={{ width: "250px" }}
                            placeholder="请输入文件名(默认file)"
                            onChange={this.filenameChange}
                        />
                    </Col>
                    <Col style={{ marginLeft: "20px" }}>
                        <Button
                            type="primary"
                            onClick={() => this.handleDownload("all")}
                        >
                            全部导出
                        </Button>
                    </Col>
                    <Col style={{ marginLeft: "20px" }}>
                        <Button
                            type="primary"
                            onClick={() => this.handleDownload("selected")}
                        >
                            导出已选择项
                        </Button>
                    </Col>
                </Row>
                <Row style={{ marginTop: "30px" }}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={false}
                        rowSelection={{
                            ...rowSelection,
                        }}
                    >
                    </Table>
                </Row>
            </div>
        )
    }
}

Export2Zip.js

import { saveAs } from 'file-saver';
import JSZip from 'jszip'

export function export_txt_to_zip(th, jsonData, txtName, zipName) {
  const zip = new JSZip()
  const txt_name = txtName || 'file'
  const zip_name = zipName || 'file'
  const data = jsonData
  let txtData = `${th}\r\n`
  data.forEach((row) => {
    let tempStr = ''
    tempStr = row.toString()
    txtData += `${tempStr}\r\n`
  })
  zip.file(`${txt_name}.txt`, txtData)
  zip.generateAsync({
    type: "blob"
  }).then((blob) => {
    saveAs(blob, `${zip_name}.zip`)
  }, (err) => {
    alert('导出失败')
  })
}