下载文件,自动获取后端返回文件名,并自动识别文件格式,如果是iso-8859-1编码转换utf-8

点击下载文件按钮,获取后端返回接口,根据请求头自动解析文件名称,自动识别文件类型后缀名,如果中文是iso-8859-1格式转换为utf-8,否则下载不了.

clike 复制代码
axios({
  method: 'get',
  url: 'http://your-backend-url/download',
  responseType: 'blob',
}).then(response => {
// 获取请求头内容
  const contentDisposition = response.headers['content-disposition'];
  // 文件名处理、格式处理
  const encodedFilename = contentDisposition.split('filename=')[1];

  // utf-8格式处理
  // const decodedFilename = decodeURIComponent(encodedFilename);
  
  // iso-8859-1格式处理
  const decodedFilename = decodeURIComponent(escape(encodedFilename));
  // 创建一个 Blob 对象
  const blob = new Blob([response.data], { type: response.headers['content-type'] });
  
  // 创建一个 URL 对象
  const url = window.URL.createObjectURL(blob);

  // 创建一个链接元素并模拟点击以下载文件
  const a = document.createElement('a');
  a.href = url;
  //文件名、后缀类型处理
  a.download = decodedFilename;
  document.body.appendChild(a);
  a.click();
  // 释放内存
  window.URL.revokeObjectURL(url);
});
相关推荐
小兵张健8 小时前
开源 playwright-pool 会话池来了
前端·javascript·github
codingWhat12 小时前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
Lee川12 小时前
深度拆解:基于面向对象思维的“就地编辑”组件全模块解析
javascript·架构
进击的尘埃12 小时前
Web Worker 与 OffscreenCanvas:把主线程从重活里解放出来
javascript
codingWhat12 小时前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
进击的尘埃12 小时前
用 TypeScript 的 infer 搓一个类型安全的深层路径访问工具
javascript
yuki_uix12 小时前
Object.entries:优雅处理 Object 的瑞士军刀
前端·javascript
Lee川12 小时前
JavaScript 面向对象编程全景指南:从原始字面量到原型链的终极进化
javascript·面试
Neptune116 小时前
JavaScript回归基本功之---类型判断--typeof篇
前端·javascript·面试
进击的尘埃16 小时前
微前端沙箱隔离:qiankun 和 wujie 到底在争什么
javascript