React之实现Excel文件导出

一、json数据导出Excel

（1）react-csv插件

需要用到下面这个插件：
https://www.npmjs.com/package/react-csv

（2）使用方法

import { CSVDownload } from 'react-csv';
//将要导出的数据存在state里
const [list, setList] = useState([]);

<CSVDownload
  data={list} //要导出的数据list
  target="_blank" //以打开新标签页形式进行下载
  filename="xxxx数据表.csv"
  style={{ float: 'right', marginTop: '-10px', marginRight: '5px' }}
>
  下载  //点击下载就可以完成下载（button形式）
</CSVDownload>

----------------------我是分割线

import {CSVLink} from 'react-csv';

<CSVLink data={array} enclosingCharacter={`'`}>
    Download me   //Link形式
</CSVLink>

二、通过文件流形式导出

（1）文件流导出形式和方法介绍

1. 文件流导出两种方式

文件流形式导出有两种方式，get和post

• get：可以利用浏览器直接进行下载
• post：需要创建a标签，触发click事件进行下载（其实get方式也可以这样进行下载，只不过我便于理解，这样写。）

2. 文件流形式

1. 首先看network，type为document
   
2. 然后看response，content-type为octet-stream
   
3. 且response不可预览
   

（2）利用浏览器直接下载

利用浏览器直接下载，是不需要自己写接口的，就直接将要下载的链接赋给a标签的href，需要记住的是，不需要写域名和端口。

下载

（3）创建a标签下载

1. 如果是post请求则需要指定传输类型

import axios from 'axios';
export function ceshi(params:any): Promise<any> {
  //需要使用axios的原生
  return axios.post(
    '/api_asset_plt_be/api/download_csv_file/ec5b437e-8cbd-4b0b-a5c1-d00be75766bc.csv',
    params,
    {
      responseType: 'arraybuffer', //在header头里指定传输类型
      headers: {
        [TOKEN]: token, //不需要token可以不写
      },
    },
  );
}

2. 读文件，不能使用解构，如下所示得到文件流

const handleClickceshi = useCallback(async () => {
    try {
      const result = await ceshi();
      console.log(result);
      debugger;
    } catch (e) {
      message.error(e.message || 'error');
    }
  }, []);

 <Button type="primary" onClick={handleClickceshi}>
  ceshi click me!{' '}
 </Button>

文件流形式如下，可以看出data就是我们需要的文件，（最后也是将data转blob，有很多小伙伴最后导出的文件是[object,object]是因为把json对象转blob导致的。

3. 将文件赋给a标签

  const handleClickceshi = useCallback(async () => {
    try {
      const result = await ceshi();
      //转为blob，被转的一定是ArrayBuffer
      const blob = new Blob([result.data]);
      //创建a标签
      const a = document.createElement('a');
      //创建href
      a.href = URL.createObjectURL(new Blob([blob], { type: 'application/vnd.ms-excel' }));
      a.download = '测试名称'; //设置文件名称
      a.click(); //触发点击事件
      message.success('导出成功！');
    } catch (e) {
      message.error(e.message || 'error');
    }
  }, []);