Ant Design Pro下如何實(shí)現(xiàn)文件下載

這篇文章主要介紹Ant Design Pro下如何實(shí)現(xiàn)文件下載，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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

表一：前端請(qǐng)求后端下載文件的各種情況

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

import request from '@/utils/request';

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

然后在對(duì)應(yīng)的 Model 里編寫(xiě)相關(guān)請(qǐng)求處理的業(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: {},
}

最后編寫(xiě)頁(yè)面組件相關(guān)業(yè)務(wù)邏輯，點(diǎn)擊下載按鈕，派發(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í)際情況填寫(xiě)參數(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); // 此寫(xiě)法兼容可火狐瀏覽器
          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>;
  }
}

以上是“Ant Design Pro下如何實(shí)現(xiàn)文件下載”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！