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 相关文章推荐
json 定义
Jun 10 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
js实现随机8位验证码
Jul 24 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 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
非常好的php目录导航文件代码
2006/10/09 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
浅谈js中的bind
2019/03/18 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python打开网页和暂停实例
2014/09/30 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
企业安全生产承诺书
2014/05/22 职场文书
体现团队精神的口号
2014/06/06 职场文书
学校督导评估方案
2014/06/10 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2016新年致辞
2015/08/01 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers