下载图片时,接口返回的地址是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 });
},

  

base64格式文件下载方法的更多相关文章

  1. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

  2. uniapp微信小程序保存base64格式图片的方法

    uniapp保存base64格式图片的方法首先第一要先获取用户的权限 saveAlbum(){//获取权限保存相册 uni.getSetting({//获取用户的当前设置 success:(res)= ...

  3. C++读写图片数据转成Base64格式的一种方法

    最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...

  4. 图片base64格式转为file文件类型上传方法

    日常使用文件上传方式,都是通过input type='file'的文件选择框进行文件上传.但是会通过其他交互方式等到图片的base64格式进行上传.具体情况如下示意: 在项目开发中,需要进行照片采集, ...

  5. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  6. 上传文件Base64格式(React)

    记录一下上传文件时将文件数据转为Base64的方法 通过 FileReader对象创建一个实例,然后使用 readAsDataURL方法将数据转为Base64格式 注意: 读取过程是异步的 绑定onl ...

  7. 使用Base64格式的图片制作ICON

    使用Base64格式的图片制作ICON的优势是Base64图片可以减少请求次数:加快首屏数据的显示速度:使用这种方式不会对图片压缩 使用base64工具将图片转成字符串 使用站长工具可以将图片转成字符 ...

  8. 上传base64格式的图片到服务器

    上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...

  9. 上传附件(图片base64)封装方法

    上传附件(图片base64)封装方法 php 上传附件,base64 项目中封装的接口: public function error($msg){ header("Content-type: ...

随机推荐

  1. Storm工作流程 vs. Spark Stream

    看的这个学习课程: http://study.163.com/course/courseLearn.htm?courseId=1002887002#/learn/video?lessonId=1003 ...

  2. HDU 2295

    二分答案+重复覆盖.注意返回的条件哦,不能光套模板. #include <iostream> #include <cstdio> #include <cstring> ...

  3. HDU 4530

    今天让人看不起了,话说好伤心,说我搞了ACM那么久都没获得拿得出手的奖.... 今晚爷爷我要狂刷2013腾讯马拉松的水题,奶奶滴,哈哈哈哈...T_T #include <iostream> ...

  4. NEFU 115

    刚开始,做了水题 #include <iostream> #include <cstdio> #include <algorithm> using namespac ...

  5. pl/sql developer 自带汉化选项

    pl/sql developer 自带汉化选项 版本:11.0.2 工具 -> 选项 -> 用户界面 ->外观, 第一项就是选择语言: 选择Chinese.lang,如果有的话:

  6. RecyclerView的使用(1)之HelloWorld

    原创文章.转载请注明 http://blog.csdn.net/leejizhou/article/details/50670657 RecyclerView是伴随Android 5.0公布的新控件, ...

  7. HDU3535 AreYouBusy 混合背包

    题目大意 给出几组物品的体积和价值,每组分为三种:0.组内物品至少选一个:1.组内物品最多选一个:2.组内物品任意选.给出背包容量,求所能得到的最大价值. 注意 仔细审题,把样例好好看完了再答题,否则 ...

  8. makepy

    文件连接: https://files.cnblogs.com/files/mophy/%E7%99%BB%E5%BD%95%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90.7 ...

  9. python spark 求解最大 最小 平均 中位数

    rating_data_raw = sc.textFile("%s/ml-100k/u.data" % PATH) print rating_data_raw.first() nu ...

  10. redis集群部署及常用的操作命令_01

    简单说下自己测试搭建简单的redis集群的大体步骤: 1.首先你的有6个redis(官方说最少6个,3master,3slave),可以先在一台机器上搭建,搭建到多台上应该只需要改变启动命令即可(可能 ...