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 相关文章推荐
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解vue-cli 脚手架 安装
Apr 16 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php创建图像具体步骤
2017/03/13 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
django实现分页的方法
2015/05/26 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
收银出纳员岗位职责
2014/02/23 职场文书
普通话宣传标语
2014/06/26 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
民间借贷借条如何写
2015/05/26 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
MySQL学习之基础操作总结
2022/03/19 MySQL
MySQL创建表操作命令分享
2022/03/25 MySQL