base64格式文件下载方法

下载图片时,接口返回的地址是base64格式的文件数据,因为页面需要把base64格式的数据转换为文件,再进行下载:

解决方案:

  下载按钮:

<el-button type="default" class="btnfoot" @click="downloadFun">下载</el-button>

  下载事件:

  以下方法:downloadFile、base64ToBlob可以直接使用。

  其中,multipleSelection表示所勾选的下载数据列表信息

 downloadFun() {
      console.log(this.multipleSelection);
      for (let i = 0; i < this.multipleSelection.length; i++) {
        const param = {
          Command: 'downloadfile',
          FileName: this.multipleSelection[i].FileName
        }
        videoImgDownload(param).then(response => {
          this.base64Src = response.FileData;
          this.downloadFile(response.FileName, this.base64Src);
        });
      }
    },
    downloadFile(fileName, content) {
      const aLink = document.createElement('a');
      const blob = this.base64ToBlob(content); // new Blob([content]);
      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('click', true, true);// initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    base64ToBlob(code) {
      const parts = code.split(';base64,');
      const contentType = parts[0].split(':')[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },

  

猜你喜欢

转载自www.cnblogs.com/luoxuemei/p/10005572.html
今日推荐