文章目录
一、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. 文件流形式
- 首先看network,type为document
- 然后看response,content-type为octet-stream
- 且response不可预览
(2)利用浏览器直接下载
利用浏览器直接下载,是不需要自己写接口的,就直接将要下载的链接赋给a标签的href,需要记住的是,不需要写域名和端口。
<a target="_blank" href=“xxxx/xxxx/xxx”>下载</a>
(3)创建a标签下载
- 如果是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可以不写
},
},
);
}
- 读文件,不能使用解构,如下所示得到文件流
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导致的。
- 将文件赋给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');
}
}, []);