Ant Design Pro下如何實現文件下載

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

最近編寫在頁面內通過 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>;
  }
}

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