ant design 中,使用dva/fetch 设置导致无法从后台导出excel的问题

最近使用antd 做一个后台管理系统中,业务场景下需要将数据导出为excel,后端使用POI,结果数据怎么都无法生成,后面发现原来是前端限制了header 中可以接受的数据类型为json,无法接受blob的类型,后来改用了axios,就可以顺利导出了,下面是导出的代码

 1 import axios from ‘axios‘;
 2
 3 async function getExcel(url, fileName) {
 4   const token = localStorage.getItem(‘token‘);
 5   axios
 6     .get(url, {
 7       responseType: ‘blob‘, // 表明返回服务器返回的数据类型,
 8       headers: {
 9         Authorization: ‘Bearer ‘ + token,
10         Accept: ‘application/json‘,
11       },
12     })
13     .then(res => {
14       const content = res;
15       const blob = new Blob([content.data], {
16         type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8‘,
17       });
18       // return;
19       if (‘download‘ in document.createElement(‘a‘)) {
20         // 非IE下载
21         const elink = document.createElement(‘a‘);
22         elink.download = fileName;
23         elink.style.display = ‘none‘;
24         elink.target = ‘_blank‘;
25         elink.href = URL.createObjectURL(blob);
26         document.body.appendChild(elink);
27         console.log(elink);
28         elink.click();
29         URL.revokeObjectURL(elink.href); // 释放URL 对象
30         document.body.removeChild(elink);
31         // window.location.reload();
32       } else {
33         // IE10+下载
34         navigator.msSaveBlob(blob, fileName);
35         window.location.reload();
36       }
37     });
38 }
39 export default {
40   getExcel,
41 };

原文地址:https://www.cnblogs.com/zhangsdml/p/9447784.html

时间: 2024-08-04 15:13:47

ant design 中,使用dva/fetch 设置导致无法从后台导出excel的问题的相关文章

Ant Design 中覆盖组件样式

业务场景: 由于业务的个性化需求,我们经常会遇到需要覆盖组件样式的情况,这里举个简单的例子. antd Select 在多选状态下,默认会展示所有选中项,这里我们给它加一个限制高度,超过此高度就出滚动条 代码: // TestPage.less .customSelect { :global { .ant-select-selection { max-height: 51px; overflow: auto; } } } // TestPage.js import { Select } from

ant design 中的table中的分页

<Row> {base ? <Table columns={base.columns} dataSource={base.data} style={{ marginTop: 10 }} pagination={{ simple:false, current:basePagination.current, total:basePagination.total, pageSizeOptions:['10','20','30','40','50'], showSizeChanger:true,

Ant Design 中Select组件报错 Invalid prop `value` of type `string` supplied to `Select`

Invalid prop `value` of type `string` supplied to `Select`, expected `array` when `multiple` or `tags` is `true`. 这个位置默认值为数组 [ ] 原文地址:https://www.cnblogs.com/dianzan/p/12230353.html

2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design.react.es6: 2. 在此之前,只看过一点点 es6 的语法,未实操:react 也只是看过语法,未实操:ant design 是个什么鬼,第一次听说. 3. 所遇的主要问题: (1)ant design 中 table 组件的使用: 引入 Table.Buttton.Col.Row.Select

react + es6 +ant design 实现一个简单demo表格添加删除

首先介绍一下整体的样式及实现的效果 如图所示,点击添加按钮会接着后面新增一行,点击操作下的删除图标将会删掉一行,如果删掉序号为1的行,第二行会自动变成第一行序号也会随之改变. ps:数据交互均还未实现. 介绍完毕:下面正题! 1.布局 import React, { Component, PropTypes } from 'react';import { Table, DatePicker, Select, InputNumber, Input, Button, Icon } from 'ant

ASP.net中导出Excel的简单方法介绍

下面介绍一种ASP.net中导出Excel的简单方法 先上代码:前台代码如下(这是自己项目里面写的一点代码先贴出来吧) <div id="export" runat="server" style="width: 700px; margin-left: auto; margin-right: auto;"> <!--startprint--> <table width="100%" border=&

Ant Design Pro 中的服务端交互

前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的 effect: 调用统一管理的 service 请求函数: 使用封装的 request.js 发送请求: 获取服务端返回: 然后调用 reducer 改变 state: 更新 model 统一的请求处理都放在 services 文件夹中,并且一般按照 model 维度进行拆分文件 services/ user.js api.js ... 其中,ut

实战 ant design pro 中的坑

1.前戏: 1,替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/*的链接换成 http://localhost:8080/ export default noProxy ? {'GET /api/*':'http://localhost:8080/'} : delay(proxy, 1000); 2.启动: window:npm run start:no-proxy 其他系统没试 坑 1. what?这是什么鬼没设置ke

[原创]React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pro是权限菜单,权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户,比如管理员有给用户分配不同角色的权限,那管理员就可以看到系统管理等导航菜单,而用户A只有发布某些业务的权限,那用户A就不能看到系统管理的导航菜单等等.不过这不在我们本文的考虑范围内,有兴趣的同学可以自行去看它的API:Autho