下载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:文件名,可自定义
  })

你可能感兴趣的:(js,javascript,前端)