antd , antd pro 技术随笔

antd pro 实现文件下载

2019-10-23  本文已影响0人  ___沐子___

antd pro 实现文件下载

这是POST 请求的:

1. service :

export async function downloadDiagnosticLog(params) {

  return request(`/api/v1/diagnosisLogController/download?${stringify(params, { arrayFormat: 'repeat' })}`);

}

2.models:

* sendDownloadDiagnosticLog({ payload }, { call, put }) {

  console.log('payload:  ', payload);

  const response= yield call(downloadDiagnosticLog, payload);

  console.log('payload:  ', response);

  yield put({

    type: 'respDownloadDiagnosticLog',

    payload: response,

});

},

respDownloadDiagnosticLog(state, { payload }) {

  return {

    ...state,

    downloadDiagnosticLogState: payload,

};

},

3.jsx:

async sendDownloadDiagnosticLog(id) {

  const fileName= 'rowData.activeDepotName';//说白了就是给文件个名字

  console.log(this);

  await this.props.dispatch({//发送请求

    type: 'DiagnosticLog/sendDownloadDiagnosticLog',

    payload: { id: id ? [id] : this.state.selectedRowKeys},//参数

  });

  const { DiagnosticLog: { downloadDiagnosticLogState} } = this.props;

  console.log(downloadDiagnosticLogState);

  let response= downloadDiagnosticLogState;

  const blob= new Blob([response]);//创建blob对象

  const aLink= document.createElement('a');//创建a链接

  aLink.style.display= 'none';

  aLink.href= blob;

  aLink.download= fileName;

  document.body.appendChild(aLink);

  aLink.click();

  document.body.removeChild(aLink);

};

后端是get请求:

<a href={`/api/v1/diagnosisLogController/download?id=${record.id}`}

上一篇 下一篇

猜你喜欢

热点阅读