首页 > 其他分享 >js通过post请求实现导出功能

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

时间:2024-01-06 15:04:17浏览次数:38  
标签:const 导出 fileName json let blob post js data

项目开发中,有时候会碰到导出功能的开发,对于请求参数中有特殊符号的情况,可以通过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();

标签:const,导出,fileName,json,let,blob,post,js,data
From: https://blog.51cto.com/u_2870645/9127210

相关文章

  • 【入门】从零开始学习和了解ml5.js
    学习ml5.js可以分为几个主要步骤。下面是一个简要的指南,帮助你入门ml5.js:准备环境:首先,确保你有一个可用的开发环境,例如一个文本编辑器和一个现代的Web浏览器。你可以在本地搭建一个简单的Web服务器,也可以直接使用在线的代码编辑器。引入ml5.js:在你的HTML文件中引入ml5.js库。你可......
  • JSON中带多余反斜杠?原来是滥用FastJSON造成的!
    以前对接很多老系统的接口是发现对方返回的JSON往往有些不太对劲,例如{"key_1":"A","key_2":"{\"name\":\"Tom\"}"}由于以前我使用springBoot自带的Jackson,因此从未自己造成这种现象,然而最近在对接一个接口时,我自己使用FastJSON时恰巧就复制了一模一样的bug:我当时就......
  • Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率(结
    环境贴图作用测试MeshPhysicalMaterial清漆层MeshPhysicalMaterial和MeshStandarMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质,MeshPhysicalMaterial是MeshStandarMaterial的子集,除了继承了他的这些属性以外,还新增了清漆、透光率、反射率、光泽、折射率等等清漆......
  • Servlet(JSP)学习笔记
    目录IDEA配置JSP基本语法page指令ScriptLet标签注释包含跳转JSP四大作用域applicationsessionrequestpageJSP九大内置对象responseoutpageContextconfigexceptionJavaBean组件JavaBean组件引入创建JavaBean设置属性值获取属性值JavaBean的保存范围JavaBean的删除ServletHelloWorld......
  • 2024年小红书最新x-s-common签名算法分析以及点赞api接口测试nodejs(2024-01-05)
      2024年小红书又更新了x-s-common算法,现在的版本是:3.6.8。这个签名算法现在是越来越重要了,许多接口都要用到。比如:评论,点赞等接口,没有这个算法采集不到数据。  一、chrome逆向x-s-common算法  1、x-s-common  打开chrome,按f12,打开开发者模式,随便找一接口,全局......
  • eslintrc.js配置文件详解
    转自:https://www.jianshu.com/p/fe727ad2bbf4通俗说就是统一代码规范。配置参数rules:{"规则名":[规则值,规则配置]}规则值"off"或者0//关闭规则关闭"warn"或者1//在打开的规则作为警告(不影响退出代码)"error"或者2//把规则作为一个错误(退出代码触......
  • 7、postgres创建一个新用户
    目录postgres创建一个新用户1、连接到PostgreSQL服务器2、切换对要创建用户的数据库3、创建新的schema4、创建用户5、授权schema的使用权限给新用户postgres创建一个新用户1、连接到PostgreSQL服务器psql-Upostgres2、切换对要创建用户的数据库\ctemplate1;3、创建......
  • 6、postgres序列创建、删除与重置
    postgres序列创建、删除与重置1、序列创建sequence_name为要创建的序列名称;start_value指定起始值;increment_by指定每次递增/递减的量;min_value和max_value分别设置最小值和最大值;cache_size表示可以从内存中获取的序列号的数目。CREATESEQUENCEsequence_name;--使用默认参......
  • Python flask 网页版执行shell命令并返回结果['GET', 'POST'] 混合方式
    前言全局说明Pythonflask网页版执行shell命令并返回结果一、需要安装的库pip3installflask-ihttp://pypi.douban.com/simple/--trusted-hostpypi.douban.compip3installsubprocess-ihttp://pypi.douban.com/simple/--trusted-hostpypi.douban.com二、inde......
  • Node.js 读取文件技巧与案例分享
    在面向服务器端JavaScript环境 Node.js 的开发中,处理文件读取至关重要,它是实现文件内容访问、分析和操作的关键步骤。这一功能对开发网络服务、日志审查系统、数据加工程序等多种软件非常有用。有了Node.js强大的文件处理能力,您可以毫不费力地读入文本、JSON、XML等文件类型......