下载图片时,接口返回的地址是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. 《编程导论(Java)&#183;2.1.2 啊,我看到了多态》-什么是多态(polymorphism)

    1.不明觉厉 很多人学习多态时,会认为. 之所以不明觉厉,由于多态的定义:事物存在的多种表现形态:而后,有人将重载(overload).改写(override).多态变量和泛型归结于同一个术语&quo ...

  2. 第一次Java作业——简单的登录界面

    千里之行,始于足下,从小做起,一点一滴学编程. import javax.swing.*; import java.awt.*; public class Homework{ public stati ...

  3. PHP统计所有字符在字符串中出现的次数

    <?php //统计字符串中出现的字符,出现次数 echo '<pre>'; $str = 'aaabbccqqwweedfghhjffffffffggggggggg';//字符串示 ...

  4. C C++每个头文件的功能说

    C/C++每个头文件的功能说明 传统 C++ #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 #include &l ...

  5. vim插件系列

    http://foocoder.com/blog/mei-ri-vimcha-jian-ping-hua-gun-dong-accelerated-smooth-scroll-dot-vim.html ...

  6. JavaScript:Browser 对象

    ylbtech-JavaScript:Browser 对象 1.  Window 对象返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框 ...

  7. Spring进行表单验证

    转自:https://www.tianmaying.com/tutorial/spring-form-validation 开发环境 IDE+Java环境(JDK 1.7或以上版本) Maven 3. ...

  8. C#操作QQ邮箱发送电子邮件原来这么简单。。。。

    在贴代码之前,首先需要给QQ邮箱开服务IMAP/SMTP服务,详细开通方法见 "开通方法"(可能需要发送收费短信,所以只要开通这一个服务就好了). 这边主要就是为了一个服务的授权码 ...

  9. css简单介绍

    css层叠样式表,主要作用就是解决内容与表现分离的问题.html标签有自己的意义当然也是有自己的默认样式的,但有时候我们想修改他的样式,这时候就需要了css. 例:给字体加上颜色,我们有如下几种方法: ...

  10. java网络编程之socket(1)

    网络编程是什么 网络编程的本质是两个设备之间的数据交换,当然,在计算机网络中,设备主要指计算机.数据传递本身没有多大的难度,不就是把一个设备中的数据发送给两外一个设备,然后接受另外一个设备反馈的数据. ...