前端vue axios根据服务端返回的文件名和文件流生成文件下载

IT码农-爱吃辣条

已于 2022-06-06 09:10:35 修改

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-05-24 13:35:15 首次发布

本文链接：https://blog.csdn.net/qq_24504591/article/details/124945234

版权

Vue axios 文件下载 Blob对象 content-disposition

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

/**
 * @description 前端vue axios根据服务端返回的文件名和文件流生成文件下载
 * @param {*} data
 * @param {String} fileName
 */
const fileExport = (data, fileName) => {
  // 创建当前时间字符串，生成文件名称时使用
  // const time = +new Date()
  if(!fileName) {
    let dis = data.headers['content-disposition']
    fileName = decodeURIComponent(dis.split('attachment;filename=')[1])
  }
  // 转化为blob对象
  const blob = new Blob([data.data || data], {
    type: "application/octet-stream",
  });
  const urlObject = window.URL || window.webkitURL || window
  // 将blob对象转为一个URL
  let blobURL = urlObject.createObjectURL(blob);
  // 创建一个a标签
  let tempLink = document.createElement("a");
  // 隐藏a标签
  tempLink.style.display = "none";
  // 设置a标签的href属性为blob对象转化的URL
  tempLink.href = blobURL;
  // 给a标签添加下载属性
  tempLink.setAttribute("download", fileName);
  if (typeof tempLink.download === "undefined") {
    tempLink.setAttribute("target", "_blank");
  }
  // 将a标签添加到body当中
  document.body.appendChild(tempLink);
  // 启动下载
  tempLink.click();
  // 下载完毕删除a标签
  document.body.removeChild(tempLink);
  urlObject.revokeObjectURL(blobURL);
}

/**
 * @description 根据Url下载文件，包括图片
 * @param {*} url
 * @param {*} fileName
 */
const downloadUrlFile = (url, fileName = new Date().valueOf()) => {
  const url2 = url.replace(/\\/g, '/')
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url2, true)
  xhr.responseType = 'blob'
  // xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
  // 为了避免大文件影响用户体验，建议加loading
  xhr.onload = () => {
    if (xhr.status === 200) {
      const blob = xhr.response
      const type = blob.type.split('/')[1] || ''
      fileName = fileName + '.' + type
      fileExport(blob, fileName)
    }
  }
  xhr.send()
}