快捷導(dǎo)航

Ant Design Pro 下實現(xiàn)文件下載的實現(xiàn)代碼

更新時間：2019年12月03日 08:31:15 作者：JasonHe

這篇文章主要介紹了Ant Design Pro 下實現(xiàn)文件下載的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近編寫在頁面內(nèi)通過 AJAX 請求服務(wù)器下載文件遇到一些問題，網(wǎng)上找的資料和介紹大多不健全不系統(tǒng)，最終自己摸索出來的解決方案，先簡單寫個初稿，后面再詳細(xì)補充。

表一：前端請求后端下載文件的各種情況

請求方法	請求方式	響應(yīng)結(jié)果
GET	頁面跳轉(zhuǎn)	文件對應(yīng)的 URL
POST	AJAX	文件的二進(jìn)制流

首先，需要在 src/service/api.js 里聲明對應(yīng)請求返回的文件類型：

import request from '@/utils/request';

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

然后在對應(yīng)的 Model 里編寫相關(guān)請求處理的業(yè)務(wù)邏輯：

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: {},
}

最后編寫頁面組件相關(guān)業(yè)務(wù)邏輯，點擊下載按鈕，派發(fā)下載 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: {}, // 根據(jù)實際情況填寫參數(shù)
      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>;
  }
}

大功告成！~~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: