处理文件跨域下载a标签重命名失效问题

422 阅读1分钟

主要是此方法 在a标签上调用即可 this.courseDownload(url,file.name) a @click courseDownload(url,file.name)

//预览文件 不用
    uploadPreviewFileOld(file) {
      return
      getAction(this.onloadUrl, { fileName: file.key ? file.key : file.name }).then((res) => {
        window.open(res.result.url, '_blank')
      })
    },
    //预览文件2.0 防闪动以及文件重命名
     uploadPreviewFile(file) {
       console.log("file",file);
      getAction(this.onloadUrl, { fileName: file.key ? file.key : file.name }).then((res) => {
        console.log(res);
         let url = res.result.url
        this.courseDownload(url,file.name)
      })
       
    },
  courseDownload(url, filename) {
    let that = this
    this.getBlob(url, function(blob) {
        that.saveAs(blob, filename);
    })
  },
  getBlob(url,cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
        if (xhr.status === 200) {
            cb(xhr.response);
        }
    };
    xhr.send();
  },
/**
 * 保存
 * @param  {Blob} blob
 * @param  {String} filename 想要保存的文件名称
 */
saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement('a');
        var body = document.querySelector('body');
 
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
 
        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);
 
        link.click();
        body.removeChild(link);
 
        window.URL.revokeObjectURL(link.href);
    }},