ajax jquery 下载流文件

5,867次阅读
没有评论

共计 1149 个字符,预计需要花费 3 分钟才能阅读完成。

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();
   }
}

原文地址: ajax jquery 下载流文件

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-23发表,共计1149字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)