zoukankan      html  css  js  c++  java
  • 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 => {
              console.log('videoImgDownload');
              console.log(response);
              if (response.StateCode == '200') {
                this.base64Src = response.FileData;
                this.downloadFile(response.FileName, this.base64Src);
              } else {
                this.$notify({title: '异常', message: response.message, type: 'warning', duration: 0});
              }
            });
          }
        },
        downloadFile(fileName, content) {
          const blob = this.base64ToBlob(content); // new Blob([content]);
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
    
            //此写法兼容可火狐浏览器
            document.body.appendChild(link);
            const evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            link.dispatchEvent(evt);
            document.body.removeChild(link);
          }
        },
        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 });
        },
    

      

  • 相关阅读:
    java 深入理解jvm内存模型 jvm学习笔记
    java实体 和 xml相互转换
    clickhouse 离线/在线 安装和java通过jdbc链接
    clickhouse安装 Requires: libstdc++.so.6(GLIBCXX_3.4.19)(64bit)
    maven pom.xml详解
    elasticsearch 简单demo RestHighLevelClient LowLeveClient
    从一段时间段中获取所有日期
    hadoop 输入路径用正则表达式被默认处理为多个参数的问题
    对象变化影响map中的数据
    小技巧积累
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/10005572.html
Copyright © 2011-2022 走看看