javascript - 将下载字符串作为文本文件发出

Question

我正在尝试将通过 GET 请求获得的数据下载为 .txt 文件，但下载文件的内容一直是​​“未定义”。我只需要响应的数据部分。下面提供了示例响应以及我的 redux 操作、reducer 和我的导出功能 我的行动:

export const previewLodgements = (id) => (dispatch) => {
  const accessToken = JSON.parse(localStorage.getItem('greenpole_redux_state'));
  dispatch({ type: certificateConstant.PREVIEW_CERTIFICATE_PROGRESS });
  fetch(`${urlConstants.CERTIFICATE_BASE_URL}certificate/lodge/preview/${id}`, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${accessToken.auth.token}`,
    },
  })
    .then((res) => res.json())
    .then((query) => {
      if (query.status === '00') {
        dispatch({
          payload: query.data,
          type: certificateConstant.PREVIEW_CERTIFICATE_SUCCESS,
          message: 'Preview successful',
        });
      } else {
        dispatch({
          payload: query.data,
          type: certificateConstant.PREVIEW_CERTIFICATE_FAILURE,
          message: query.statusMessage,
        });
      }
    })
    .catch((error) => {
      dispatch({
        payload: null,
        type: certificateConstant.PREVIEW_CERTIFICATE_FAILURE,
        message: 'unable to preview lodgements',
      });
    });
};

我的 reducer :

import { certificateConstant } from '../../lib/constants/certificateConstants';

const initialState = {
  loading: false,
  previewLodgement: '',
};

const certificateReducer = (state = initialState, action) => {
  switch (action.type) {
        case certificateConstant.PREVIEW_CERTIFICATE_PROGRESS:
      return {
        status: action.status,
        message: action.message,
        loading: true,
      };
    case certificateConstant.PREVIEW_CERTIFICATE_SUCCESS:
      return {
        ...state,
        previewLodgement: action.payload,
        status: action.status,
        message: action.message,
        loading: false,
      };
    case certificateConstant.PREVIEW_LODGEMENT_FAILURE:
      return {
        ...state,
        previewLodgement: action.payload,
        status: action.status,
        message: action.message,
        loading: false,
      };
    default:
      return state;
  }
};

export default certificateReducer;

我的下载功能:

 const previewLodgement = useSelector(
    (state) => state.certificateReducer.previewLodgement,
  );
  const handleExport = () => {
    let id = selectedLodgements[0];
    if (validateCheck()) {
      dispatch(previewLodgements(id));
      var a = document.createElement('a');
      var file = new Blob([previewLodgement], { type: 'text/plain' });
      a.href = URL.createObjectURL(file);
      a.download = 'lodgement.txt';
      document.body.appendChild(a);
      a.click();
    }
  };

API 调用后从服务器获得的响应:

{
    "status": "00",
    "statusMessage": "",
    "data": "Title: Certificate Lodgement 1\nControl Number: 847834783748738\nDate Lodged: 2020-12-27 00:00:00.0\nStatus: Not Treated\n\nCertificates\n==============\n\nCertificate Number: 1324354565656565\nOld Certificate Number: \nVolume Of Bonds: 400\nIssue Date: 2020-09-30 00:00:00.0\nHolder Name: Andrew Efurhievwe\nHolder Address: 12, Springfield\nHolder Email: nizyvi@getnada.com\nHolder Cscs Account Number: 7647637467463746\nOld Holder Cscs Account Number: \nHolder Arp Account Number: 2111389645\nOld Holder Arp Account Number: \nIssuing Company: Duff Beer\nchn: 123456789\nclaimed: Yes\n\nCertificate Number: 1324354565656565\nOld Certificate Number: \nVolume Of Bonds: 400\nIssue Date: 2020-09-30 00:00:00.0\nHolder Name: Andrew Efurhievwe\nHolder Address: 12, Springfield\nHolder Email: nizyvi@getnada.com\nHolder Cscs Account Number: 7647637467463746\nOld Holder Cscs Account Number: \nHolder Arp Account Number: 2111389645\nOld Holder Arp Account Number: \nIssuing Company: Africa Prudential\nchn: \nclaimed: Yes\n\nCertificate Number: 2324354565656565\nOld Certificate Number: \nVolume Of Bonds: 400\nIssue Date: 2020-09-30 00:00:00.0\nHolder Name: Lisa Simpson\nHolder Address: 12, Springfield\nHolder Email: nizyvi@getnada.com\nHolder Cscs Account Number: 7647637467463746\nOld Holder Cscs Account Number: \nHolder Arp Account Number: Peter\nOld Holder Arp Account Number: \nIssuing Company: Duff Beer\nchn: \nclaimed: Yes\n\n",
    "date": 1609925003880
}

我正在尝试仅将“数据”中的字符串下载为文本文件

Answer 1

您正在将 query.data 作为有效载荷传递给您的 reducer，然后(在您的 reducer 上)您的 action.payload 变为:

"Title: Certificate Lodgement 1\nControl Number: 847834783748738\nDate Lodged: 2020-12-27 00:00:00.0\nStatus: Not Treated\n\nCertificates\n==============\n\nCertificate Number: 1324354565656565\nOld Certificate Number: \nVolume Of Bonds: 400\nIssue Date: 2020-09-30 00:00:00.0\nHolder Name: Andrew Efurhievwe\nHolder Address: 12, Springfield\nHolder Email: nizyvi@getnada.com\nHolder Cscs Account Number: 7647637467463746\nOld Holder Cscs Account Number: \nHolder Arp Account Number: 2111389645\nOld Holder Arp Account Number: \nIssuing Company: Duff Beer\nchn: 123456789\nclaimed: Yes\n\nCertificate Number: 1324354565656565\nOld Certificate Number: \nVolume Of Bonds: 400\nIssue Date: 2020-09-30 00:00:00.0\nHolder Name: Andrew Efurhievwe\nHolder Address: 12, Springfield\nHolder Email: nizyvi@getnada.com\nHolder Cscs Account Number: 7647637467463746\nOld Holder Cscs Account Number: \nHolder Arp Account Number: 2111389645\nOld Holder Arp Account Number: \nIssuing Company: Africa Prudential\nchn: \nclaimed: Yes\n\nCertificate Number: 2324354565656565\nOld Certificate Number: \nVolume Of Bonds: 400\nIssue Date: 2020-09-30 00:00:00.0\nHolder Name: Lisa Simpson\nHolder Address: 12, Springfield\nHolder Email: nizyvi@getnada.com\nHolder Cscs Account Number: 7647637467463746\nOld Holder Cscs Account Number: \nHolder Arp Account Number: Peter\nOld Holder Arp Account Number: \nIssuing Company: Duff Beer\nchn: \nclaimed: Yes\n\n"

您的操作对象没有 action.status 属性(这就是您未定义的原因)只有一个名为 payload 的属性，其值为一个字符串。

在你的 reducer 上尝试记录 action.payload，你会变得很清楚。