处理后端返回的文件地址转换进行下载

最新推荐文章于 2025-04-17 16:10:37 发布

原创最新推荐文章于 2025-04-17 16:10:37 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #html #javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

该段代码展示了如何通过Ajax请求获取文件，并利用Blob对象及FileSaver.js库实现文件的下载功能。xhr.open('GET', href)用于发起GET请求，xhr.responseType设置为'blob'以获取二进制数据，xhr.onload事件处理函数中，当状态为200时调用saveAs方法保存文件。

function download (href, name) {
  // 通过ajax重新请求文件地址传入blob类型
  const xhr = new XMLHttpRequest()
  xhr.open('GET', href, true)
  xhr.responseType = 'blob'
  xhr.onload = () => {
    if (xhr.status === 200) {
      saveAs(xhr.response, name)
    }
  }
  xhr.send()
};
function saveAs(data, name) {  // 转换流并下载
  // console.log(data)
  const urlObject = window.URL || window.webkitURL || window;
  const export_blob = new Blob([data]);
  const save_link = document.createElement('a')
  save_link.style.display = 'none';
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  document.body.appendChild(save_link);
  save_link.click();
  document.body.removeChild(save_link);
}