下载文件重命名

688 阅读1分钟

今天遇到了下载文件相关的问题,就是下载腾讯云COS回来的URL数据,一般同源的话直接一个简单的a标签处理没问题,所以我也是这么处理的,但是需求要求是下载的名称也要按上传的文件的名称(意思就是可以自定义),对于非同源的a标签的download属性不生效。

为啥我上传的时候名称好好的,回来名称就变了一串hash值串,原来是腾讯COS存储有一个相关的coskey作为键名方便存储,完事数据给返回了fileName前端拼一下。

这就需要把拿到的URL转变成一个blob格式的,再加上a标签那一套就可以完成重命名了。

//将一个url转化为blob格式的
const getBlob = (url) => {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response)
          }
        }
        xhr.send()
      })
    }
//最简单a标签那一套
const saveAs = (blob, fileName) => {
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName
      link.click()
    }
 
 //最后就是事件了
 const downFn=(record)=>{
      getBlob(record.fileUrl).then((blob) => {
        saveAs(blob, record.fileName)
      })
 }