前端文件流导出

1、前端代码

javascript 复制代码
​
/** 导出 */
const handleExport = async () => {
  let config = {
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const res = await getTargetExport(config);
  const blob = new Blob([res]);

  const fileName = 'PK目标跟进导出列表.xls';
  const linkNode = document.createElement('a');

  linkNode.download = fileName;
  linkNode.style.display = 'none';

  linkNode.href = URL.createObjectURL(blob);
  document.body.appendChild(linkNode);

  linkNode.click();
  URL.revokeObjectURL(linkNode.href);
  document.body.removeChild(linkNode);
};

/** 导出接口 */
export const getTargetExport = config => {
  return request(`${prefixPath}/target-follows/export`, {
    method: 'GET',
    ...config,
  });
};

​

2、后端返回数据:

相关推荐
我是苏苏13 小时前
Web开发:C#通过ProcessStartInfo动态调用执行Python脚本
java·服务器·前端
无羡仙13 小时前
Vue插槽
前端·vue.js
用户63879947730514 小时前
每组件(Per-Component)与集中式(Centralized)i18n
前端·javascript
SsunmdayKT14 小时前
React + Ts eslint配置
前端
开始学java14 小时前
useEffect 空依赖 + 定时器 = 闭包陷阱?count 永远停在 1 的坑我踩透了
前端
zerosrat14 小时前
从零实现 React Native(2): 跨平台支持
前端·react native
狗哥哥14 小时前
🔥 Vue 3 项目深度优化之旅:从 787KB 到极致性能
前端·vue.js
青莲84314 小时前
RecyclerView 完全指南
android·前端·面试
青莲84314 小时前
Android WebView 混合开发完整指南
android·前端·面试
GIS之路14 小时前
GDAL 实现矢量数据转换处理(全)
前端