0
点赞
收藏
分享

微信扫一扫

js通过post请求实现导出功能

项目开发中,有时候会碰到导出功能的开发,对于请求参数中有特殊符号的情况,可以通过encode转码或者post请求的方式来解决,这里写一个post方法实现的demo,大家可以根据自己的功能业务处理进行调整。

// 用于解析blob内容为json,针对导出报错响应json错误信息的情况
const reader = new FileReader();
reader.onload = function() {
  const jsonData = JSON.parse(reader.result);
  console.log(jsonData);
  // TODO deal biz json
};

// 导出方法调用
function exportData() {
  // 请求参数对象
  const data = {
    k:1,
    timeValueStart:'2024-01-01',
    timeValueEnd:'2024-01-08'
  };
  // 接口请求地址
  let reqApiUrl = 'https://api.yourdomain.com/api/export/data';
  // 下面的cnToken为接口的签名认证信息自定义请求头信息,可选
  fetch(reqApiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
	    'cnToken': '111111111111111111111111'
    },
    body: JSON.stringify(data)
  })
  .then(response => {
  	// 这里获取响应头信息中的Content-Disposition,这个信息时在服务端约定设置文件名的头信息,例如:
    // resp.setHeader("Content-Disposition", "attachment;filename=aaaaaa.xlsx");
    let cnHeaderFileName = response.headers.get('Content-Disposition');
    // 下面设置blob对象和fileName
    let result = {
      fileName: null,
      blob: response.blob()
    };
    console.log(cnHeaderFileName);
    if(cnHeaderFileName) {
      result.fileName = cnHeaderFileName.split(";filename=")[1];
    }
    return result;
  })
  .then(data => {
  	// 判断是否为文件类型,进行下载处理还是提示信息处理
    let fileName = data.fileName;
    let blob = data.blob;
    if(blob.type == 'application/json') {
      reader.readAsText(blob);
    } else {
      console.log(fileName);
      const url = window.URL.createObjectURL(new Blob([blob]));
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName || 'exported_data.xlsx';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    }
  });
}
// 导出方法调用
exportData();

举报

相关推荐

0 条评论