vue通过url下载文件并重命名

URL文件地址下载方法

本文所讲的下载地址格式为：地址+文件名（例如：http...+ 'test.docx'）

方法一：创建a标签

 const a = document.createElement('a');
      a.href = this.fileUrl;
      a.download = this.fileName;
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);

方法二：通过blob实现跨域下载并修改文件名(同样适用于URL地址)

//文件下载
downFile() {
      let fileUrl = url  //服务器文件地址
      this.getBlob(fileUrl).then(blob => {
        this.saveAs(blob, '自定义名称.doc')
      })
    },
 
//通过文件下载url拿到对应的blob对象
    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()
      })
    },
    //下载文件
    saveAs(blob, filename) {
      var link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = filename
      link.click()
    },