前端文件下载

朱雀 2022-10-31 00:52 290阅读 0赞

先记录

  1. function getFile(url, params) { 
  2.     axios({ 
  3.         method: 'get',
  4.         url: suffix + url + '?' + QueryString.encode(params),
  5.         responseType: 'arraybuffer',
  6.         withCredentials: true,
  7.     }).then(function (response) { 
  8.         let name = _fileNameInContentDisposition(response);
  9.         // console.log("返回结果", response, response.headers['content-type'], name);
  10.         let blob = new Blob([response.data], { 
  11.             type: response.headers['content-type']
  12.         });
  13.         let objectUrl = URL.createObjectURL(blob);
  14.         _saveFile(objectUrl, name);
  15.         window.URL.revokeObjectURL(blob);
  16.     });
  18. }
  20. function _saveFile(objectUrl, name) { 
  21.     let a = document.createElement('a');
  22.     a.href = objectUrl
  23.     a.download = name // 文件名 ，
  24.     a.dispatchEvent(new MouseEvent('click', { 
  25.         bubbles: true,
  26.         cancelable: true,
  27.         view: window
  28.     }))
  29. }
  33. function _fileNameInContentDisposition(res) { 
  34.     let des = res.headers['content-disposition'];
  35.     let last = des.lastIndexOf("filename=");
  36.     let fileName = des.slice(last).replace("filename=", "");
  37.     // console.log("获取到文件名", fileName);
  38.     return fileName;
  39. }

发表评论

表情：
评论列表 （有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

    相关 前端下载文件的方式

    需求：页面上有一个下载按钮，点击后实行文件下载功能。 方式一：使用window.open() 方式二：使用form表单下载 方式三：使用a标签，H5中有download属

    悠悠悠悠/ 0 赞/ 196 阅读

    相关 前端下载文件的思路

    比如我们的用户在之前上传了各种类型的文件到我们的服务器上。然后在通过留存在数据库的服务器url我们就可以访问那个资源。 > 注意点： > a标签的href属性指向链接的目

    缺乏、安全感缺乏、安全感/ 0 赞/ 81 阅读