博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
base64格式文件下载方法
阅读量:4695 次
发布时间:2019-06-09

本文共 1897 字,大约阅读时间需要 6 分钟。

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

解决方案:

  下载按钮:

下载

  下载事件:

  以下方法: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 });    },

  

 

转载于:https://www.cnblogs.com/luoxuemei/p/10005572.html

你可能感兴趣的文章
数据结构化与保存
查看>>
如何避免在简单业务逻辑上面的细节上面出错
查看>>
Linux shell 命令判断执行语法 ; , && , ||
查看>>
vim代码格式化插件clang-format
查看>>
RTP Payload Format for Transport of MPEG-4 Elementary Streams over http
查看>>
Java环境变量设置
查看>>
【JBPM4】判断节点decision 方法3 handler
查看>>
filter 过滤器(监听)
查看>>
node启动时, listen EADDRINUSE 报错;
查看>>
杭电3466————DP之01背包(对状态转移方程的更新理解)
查看>>
kafka中的消费组
查看>>
python--注释
查看>>
SQL case when else
查看>>
SYS_CONTEXT 详细用法
查看>>
Pycharm配置autopep8让Python代码更符合pep8规范
查看>>
我的第一篇博客
查看>>
【C++算法与数据结构学习笔记------单链表实现多项式】
查看>>
C#垃圾回收机制
查看>>
31、任务三十一——表单联动
查看>>
python之hasattr、getattr和setattr函数
查看>>