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

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)提供西部信息服務(wù)器托管服務(wù)，為用戶(hù)提供五星數(shù)據(jù)中心、電信、雙線(xiàn)接入解決方案，用戶(hù)可自行在線(xiàn)購(gòu)買(mǎi)西部信息服務(wù)器托管服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。

最近編寫(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)求后端下載文件的各種情況

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

首先，需要在 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 
         下載
        ;
  }
}

以上是“Ant Design Pro下如何實(shí)現(xiàn)文件下載”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：AntDesignPro下如何實(shí)現(xiàn)文件下載-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://weahome.cn/article/geghe.html