下载文件,自动获取后端返回文件名,并自动识别文件格式,如果是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);
});
相关推荐
spionbo1 分钟前
Vue 表情包输入组件实现代码及完整开发流程解析
前端·javascript·面试
全宝2 分钟前
✏️Canvas实现环形文字
前端·javascript·canvas
勤奋的知更鸟2 分钟前
Java编程之组合模式
java·开发语言·设计模式·组合模式
虾球xz8 分钟前
CppCon 2015 学习:3D Face Tracking and Reconstruction using Modern C++
开发语言·c++·学习·3d
林鸿群11 分钟前
C#子线程更新主线程UI及委托回调使用示例
开发语言·c#
前端梭哈攻城狮15 分钟前
uniapp图片上传添加水印/压缩/剪裁
前端·javascript·vue.js
天涯学馆15 分钟前
前后端分离的 API 设计:技术深度剖析
前端·javascript·面试
爱编程的喵16 分钟前
深入理解JavaScript原型机制:从Java到JS的面向对象编程之路
java·前端·javascript
独立开阀者_FwtCoder16 分钟前
Cursor 1.0 重磅发来袭(毛骨悚然,开始学习你如何编码)
前端·javascript·github
五点六六六22 分钟前
一些关于TreeShaking的AST的理解
前端·javascript·前端工程化