React + ant-design实现文件下载_柯柯就是我的博客-CSDN博客
React + ant-design实现文件下载
柯柯就是我
于 2019-05-27 10:45:27 发布
9697
收藏
分类专栏：
前端学习记录
前端开发经验笔记
文章标签：
react
antdesign
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/princek123/article/details/90598809
版权
前端学习记录
同时被 2 个专栏收录
29 篇文章
0 订阅
订阅专栏
前端开发经验笔记
27 篇文章
0 订阅
订阅专栏
我们知道react实现一个请求的流程是，页面js文件触发事件，然后调用models内的fetch，然后再去service内找对应的api，发送request请求即完成。
现在我在开发的过程中碰到一个问题，我发送如下的请求
本应返回一个文件然后触发下载，但实际上只是返回了文件内容如下
如果把这个请求复制到地址栏然后访问倒是能触发下载，所以想到能不能通过开一个a标签然后访问。但是在最开始的页面文件并不能拿到这个url，因为ip是在request里面拼装的（或许是我个人对react框架理解不够），现在的解决方法是在service内的api函数里触发a标签，如下
柯柯就是我
关注
关注
点赞
收藏
打赏
知道了
评论
React + ant-design实现文件下载
我们知道react实现一个请求的流程是，页面js文件触发事件，然后调用models内的fetch，然后再去service内找对应的api，发送request请求即完成。现在我在开发的过程中碰到一个问题，我发送如下的请求本应返回一个文件然后触发下载，但实际上只是返回了文件内容如下如果把这个请求复制到地址栏然后访问倒是能触发下载，所以想到能不能通过开一个a标签然后访问。但是在最开始...
复制链接
扫一扫
专栏目录
Ant Design Pro 下实现文件下载的实现代码
12-13
最近编写在页面内通过 AJAX 请求服务器下载文件遇到一些问题，网上找的资料和介绍大多不健全不系统，最终自己摸索出来的解决方案，先简单写个初稿，后面再详细补充。
表一：前端请求后端下载文件的各种情况
请求方法
请求方式
响应结果
GET
页面跳转
文件对应的 URL
POST
AJAX
文件的二进制流
首先，需要在 src/service/api.js 里声明对应请求返回的文件类型：
import request from '@/utils/request';
export async function Download(params = {}) {
return
ant design pro 导出excel
你好！刘斩仙
10-10
9254
** 问题：
ant design pro中请求后端接口返回数据是下图，如何转化为excel表格呢？
** 实现：
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同...
参与评论
您还未登录，请先
登录
后发表或查看评论
【Ant Design of Vue】文件下载
最新发布
一只正在狂飙的肥兔
04-04
44
js实现文件下载功能
React中使用动态创建的a标签href属性异步下载文件
ThisEqualThis的博客
07-15
2933
需求：点击Table列表中的文件名称，触发click事件，然后dispatch调取后台接口，根据返回值来确定是否下载文件。
这里面因为涉及到了后台api，所以是异步行为，这时候不能直接给a标签href属性赋值，因为点击a标签的时候会同时执行onClick方法和href属性，所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载文件的操作。
1、Table中，在"文件名称"后面增加一个下载按钮来触发click事件：
columns = [{
title: '文件名
ant design pro 实现异步下载文件
qq_45458749的博客
10-06
334
antdesign pro 异步文件下载
react-ant-admin：使用ant-design react react-hook ts开发的类ant-design-pro管理后台，具有完整的权限系统和配套的node + ts的api
02-05
React Ant管理员
开箱即用的中台前端/设计解决方案
预览： :
介绍
最开始的时候，我需要一个react开发的amdin模版，在开源社区寻找了一边之后，比较中意ant design pro的UI ，当我一堆操作把ant desgin pro desgin ant desgin pro的代码拉下来研究之后，发现内容是在太多了，除了react ， redux之外，还包含了umi ， dva ， ant-design/pro-layout等其他东西，当这些概念和ts结合起来使用的时候，我瞬间感觉无处下手，后面又仔细了阅读了权限设计，菜单栏渲染部分的代码，我重新定义了， Ant Desig
React中ant-design使用+antd的按需引入+自定义主题+踩坑填坑
weixin_45710060的博客
07-18
2131
这两天正在学习react，学习使用ant-desgin快速搭建网站，在配置按需引入和自定义主题的时候，遇到一些问题，特此记录一下整个配置流程和解决方案的过程。
React 使用Fetch+Antd 实现 携带token 下载附件
hzxOnlineOk的博客
09-03
1904
使用a标签下载：
render: (text, record) => {
return <a onClick={() => window.open('http://111.111.11.11:7000/cms_service/common/download?[%22259b92fd-e6d9-4c3e-92cb-7ab189d9fe33%22]', '_...
前端在vue、react中下载文件，使用axios下载文件流，以及兼容处理接口返回的文件流或json数据区分
初心 - 杨瑞超个人博客
06-20
796
在开发中，下载功能是我们经常遇到的，一般下载有两种：
1、后端直接返回文件地址，前端使用a标签下载
2、后端返回文件流
第1种很简单，今天我们来试下下载文件流，首先看下后端返回的数据截图：
一看到这里，我去，有点懵啊，这啥玩意，这就是所谓的文件流，想要下载，也是可以的，操作步骤如下：
直接上代码啊，有任何问题可以私聊联系，一起学习~此代码以vue+elementUI为例，react中同理页面代码：
axios代码：
下载文件流代码：
感谢阅读，有任何问题，可以一起探讨呦~...
react 发post请求 通过a标签 下载pdf文档
weixin_44880604的博客
05-20
1127
const downloadPdf = (blobUrl: any) => {
const a = document.createElement('a');
a.download = '报告信息';
a.href = blobUrl;
a.click();
};
export async function exportPdfTable(data: any) {
return request('/api/pdf/exportPdfTable', {
me
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React管理员
React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。
技术选型
react + redux + react-router + ant-design +不可变+获取
redux-action + redux-logger
类名+ lodash
ass
webpack2 + react-hot-loader
埃斯林特
实现的功能
热加载
ES6 / 7
动态路由
动作日志打印
配置生成模拟接口
本地节点服务器
ESLint
萨斯
后记
获取数据
更多特性
除了主流的技术选型
react-antd-dva：基于React+ ant-design + dva + Mock企业级后台管理系统最佳实践
02-06
React-ant-dva
基于react + ant-design + dva + Mock企业级后台管理系统最佳实践
预览： :
特性
:gem_stone:优雅美观：基于Ant Design架构精心设计
:rocket:最新技术栈：使用React / dva / antd等前端前沿技术开发
:input_numbers: 模拟数据：实用的本地数据调试方案
模板
roadhog版本升级2.0
项目建造
登录
基础布局
分析页
使用
$ git clone https://github.com/sosout/react-antd-dva.git
$ cd react-antd-dva
$ yarn install
$ yarn start
react+ant design实现Table的增、删、改的示例代码
10-17
主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-typescript-react-router-redux-antDesign-demo：React + typescript + react-router + redux + antDesign项目构建
02-20
该项目是通过。
可用脚本
在项目目录中，可以运行：
npm start或yarn start
在开发模式下运行应用程序。 打开在浏览器中查看。
如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。
npm test或yarn test
在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。
npm run build或yarn build
构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
最小化构建，文件名包含哈希。 您的应用已准备好进行部署！
有关更多信息，请参见有关的部分。
npm run eject或yarn eject
注意：这是单向操作。 eject ，您将无法返回！
如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。
而是将所有配置
react-route-login:使用了node.js+react+router+webpack+ant-design-pro 做的登陆+表格和图表页面的例子
05-17
This project was bootstrapped with .
Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide .
当你用完脚手架（Create React App）创建好项目，把相应的文件夹进行替换，然后执行：npm install
稍等一会安装完成后执行npm start
然后登陆localhost:3000即可
ant design 文件下载
qq_31182399的博客
04-15
995
文件下载
//导出报表
const exportExel = () => {
axios({
method: 'post',
url: '/insMngGjzy/comb/attribution/export',
responseType: 'arraybuffer',
data: {
combId: Number(id),
type: tempOthers?.type || 4,
startD.
react ，ant design中下载文件的方法,后台传送过来的数据是一个二进制流
weixin_42424269的博客
03-08
8987
这里我们介绍的是先上传再下载的情况
1.首先我们需要一个Upload组件
<Upload {...props}>
<Button>
<Icon type="upload"/> Click to Upload
</Button>
<...
如何学习ant-design
03-05
您可以通过以下步骤学习 ant-design：
1. 首先，您需要了解 React 框架，因为 ant-design 是基于 React 的 UI 组件库。
2. 接下来，您可以访问 ant-design 官方网站，查看其文档和示例，以了解其组件的使用方法和属性。
3. 您还可以通过阅读 ant-design 的源代码，深入了解其实现原理和设计思路。
4. 最后，您可以通过实践来巩固所学知识，例如创建自己的项目并使用 ant-design 组件来构建 UI。
希望这些步骤能够帮助您学习 ant-design。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
柯柯就是我
CSDN认证博客专家
CSDN认证企业博客
码龄6年
高校学生
59
原创
5万+
周排名
138万+
总排名
42万+
访问
等级
3150
积分
41
粉丝
143
获赞
87
评论
404
收藏
私信
关注
热门文章
vuex如何用watch监听this.$store数据的变化
49830
vue element-ui 使用required进行表单校验时自定义提示语
45078
js通过URL下载服务器文件（可行方法）
37384
C从函数返回数组
32455
Vue界面使用iframe嵌套html界面的传值问题
23418
分类专栏
产品经理学习记录
8篇
金融学习记录
6篇
前端开发经验笔记
27篇
arduino
1篇
c语言
7篇
前端学习记录
29篇
Python
3篇
我的个人建站之路
微观经济学原理
5篇
最新评论
vue如何在websocket方法内获取data里的数据和method里的函数
EVIL_catdog:
今天困扰了一下午，终于解决了..
vue如何在websocket方法内获取data里的数据和method里的函数
风长林:
感谢博主太强了
vue element-ui 使用required进行表单校验时自定义提示语
Sharon_jie:
可是这样就不能动态控制是否必填了
vue.js禁用浏览器默认事件（以tab键为例）
没有梦想的小小前端:
你这里销毁是不会生效的
vue如何在websocket方法内获取data里的数据和method里的函数
Evilstepmother:
啊啊啊啊啊啊啊啊啊啊，谢谢博主
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Audience Manager
CRM客户关系管理
产品经理-广告业务知识点收集整理
2021年3篇
2020年9篇
2019年18篇
2018年29篇
2017年1篇
目录
目录
分类专栏
产品经理学习记录
8篇
金融学习记录
6篇
前端开发经验笔记
27篇
arduino
1篇
c语言
7篇
前端学习记录
29篇
Python
3篇
我的个人建站之路
微观经济学原理
5篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
柯柯就是我
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值