下载oss文件并修改文件名

oss上的文件是可以直接通过动态创建a标签来下载的,但是下载的文件名是oss给的,在不转成blob类型的前提下更改a.download是无效的

先把文件转成文件流的形式,再通过动态创建a标签,更改a.download属性来更改文件名

1.将文件以流文件的形式下载下来


  function getBlob(url) {
    
     // url:是文件在oss上的地址
    return new Promise(resolve => {
    
    
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";// 请求类型是blob类型
      xhr.crossOrigin = "*"; // 解决跨域问题
      xhr.onload = () => {
    
    
        if (xhr.status === 200) {
    
    
          resolve(xhr.response);
        }
      };
      xhr.send();
    });
  }

2.下载文件并重新命名

function saveAs(blob, filename) {
    
    
    if (window.navigator.msSaveOrOpenBlob) {
    
    
      navigator.msSaveBlob(blob, filename);
    } else {
    
    
      const link = document.createElement("a");
      const body = document.querySelector("body");
      link.href = window.URL.createObjectURL(blob);
      link.download = filename; //修改文件名
      link.style.display = "none";
      body.appendChild(link);
      link.click();
      body.removeChild(link);
      window.URL.revokeObjectURL(link.href);
    }
  }

3. 使用

  getBlob(url).then(res =>{
    
     //url:文件在oss上的地址
       saveAs(res,filename) // filename:文件名,可自定义
  })

猜你喜欢

转载自blog.csdn.net/weixin_45324044/article/details/125336434