Ant Design Pro 下实现文件下载的实现代码


Posted in Javascript onDecember 03, 2019

最近编写在页面内通过 AJAX 请求服务器下载文件遇到一些问题,网上找的资料和介绍大多不健全不系统,最终自己摸索出来的解决方案,先简单写个初稿,后面再详细补充。

表一:前端请求后端下载文件的各种情况

请求方法 请求方式 响应结果
GET 页面跳转 文件对应的 URL
POST AJAX 文件的二进制流

首先,需要在 src/service/api.js 里声明对应请求返回的文件类型:

import request from '@/utils/request';

export async function Download(params = {}) {
 return request(`/api/download`, {
  method: 'POST', // GET / POST 均可以
  data: params,
  responseType : 'blob', // 必须注明返回二进制流
 });
}

然后在对应的 Model 里编写相关请求处理的业务逻辑:

import { message } from 'antd';
import { Download } from '@/services/api';

export default {
  namespace: 'download',
  
  state: {},
  
  effects: {
    *download({ payload, callback }, { call }){
      const response = yield call(Download, payload);
      if (response instanceof Blob) {
        if (callback && typeof callback === 'function') {
           callback(response);
        }
      } else {
        message.warning('Some error messages...', 5);
      }
    }
  },
  
  reducers: {},
}

最后编写页面组件相关业务逻辑,点击下载按钮,派发下载 action 到 model :

import React, { Component } from 'react';
import { Button } from 'antd';
import { connect } from 'dva';

@connect(({ download, loading }) => ({
 download,
 loading: loading.effects['download/download'],
}))
class ExampleDownloadPage extends Component {
  handleDownloadClick = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    const fileName = 'demo.xlsx';
    
    dispatch({
      type: 'download/download',
      payload: {}, // 根据实际情况填写参数
      callback: blob => {
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          const link = document.createElement('a');
          const evt = document.createEvent('MouseEvents');
          link.style.display = 'none';
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link); // 此写法兼容可火狐浏览器
          evt.initEvent('click', false, false);
          link.dispatchEvent(evt);
          document.body.removeChild(link);
        }
      }
    });
  }
  
  render(){
    const { loading } = this.props;
    
    return <Button 
          loading={loading} 
          icon="download" 
          onClick={this.handleDownloadClick}
        >
         下载
        </Button>;
  }
}

大功告成!~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
bootstrap table小案例
2016/10/21 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python元组的概念知识点
2019/11/19 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python自动下载图片的方法示例
2020/03/25 Python
Python PIL库图片灰化处理
2020/04/07 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
学生会竞选自荐信
2013/10/12 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python