首页 前端知识 ajax jquery 下载流文件

ajax jquery 下载流文件

2024-10-15 23:10:42 前端知识 前端哥 416 573 我要收藏

post请求下载文件流,重点是ajax如何设置接收类型
xhrFields: {
responseType: ‘blob’ // 重要:将响应类型设置为 ‘blob’
},

具体配置如下,不要加其他多余的配置,成功后创建a标签下载

//请求参数
 const p = {}
  $.ajax({
    url: 'xxx',
    method: 'POST',
    data:JSON.stringify(p),
    timeout: 90000,
    xhrFields: {
      responseType: 'blob'  // 重要:将响应类型设置为 'blob'
    },
    contentType: 'application/json; charset=utf-8',
    success: function(data,status,xhr) {
      // 将英文冒号转变为中文冒号
      const filename = '批量导出'
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(data);
      a.href = url;
      a.download = filename;
      document.body.append(a);
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    },
    error: function(xhr, status, error) {
      console.error('下载文件时出错:', error);
    },
    complete: ()=>{
      // 无论成功或者失败都会执行,可以在这取消加载状态
    }
});

如果返回数据不是blob类型,可以先转换成blob再使用a标签下载

 downLoadFile (content) {
  //content 为后端返回的数据
  //如果后端返回文件名的话
  const fileName = decodeURI(res.headers['content-disposition'].split('=')[1])
  const data = new Blob([content])
   // for IE
   if (window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveOrOpenBlob(csvData, fileName)
   } else { // for Non-IE
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(data);
      a.href = url;
      a.download = filename;
      document.body.append(a);
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
   }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19017.html
标签
评论
发布的文章

3.1 requests与JSON基础

2024-10-15 23:10:08

React 安装(NPM)

2024-10-15 23:10:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!