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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
js的一些常用方法小结
2011/06/29 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
初婚初育证明范本
2014/11/24 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Vue Element plus使用方法梳理
2022/12/24 Vue.js