下载图片时,接口返回的地址是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. Android----获得当前应用包名、当前activity的名字、推断是否是系统桌面、service类

    1.获得当前应用包名 public static String getRunningActivityName(Context context) { ActivityManager activityMa ...

  2. Kafka集群部署及測试

    题记 眼下我们对大数据进行研究方向以Spark为主,当中Spark Streaming是能够接收动态数据流并进行处理.那么Spark Streaming支持多源的数据发送端,比如TCP.ZeroMQ. ...

  3. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

  4. PL SQL Developer client 连接server

    安装完Oracle,PLSQL之后,在server中打开监听. 计算机右键-管理-服务和应用程序-服务-打开以Oracle开头的服务,特别是监听,这个最重要.详细如图所看到的. (1)配置监听的位置 ...

  5. Error解决:Property&#39;s synthesized getter follows Cocoa naming convention for returning &#39;owned&#39;

    在项目中定义了以new开头的textField.结果报错: 先看我的源代码: #import <UIKit/UIKit.h> @interface ResetPasswordViewCon ...

  6. nyoj--171--聪明的kk(动态规划--博弈)

    聪明的kk 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 聪明的"KK" 非洲某国展馆的设计灵感源于富有传奇色彩的沙漠中陡然起伏的沙丘,体现出本国不 ...

  7. php Aes 128位算法

    <?php class Mcrypt { private static $key = "fsdjfojojodjiovjojgfosdjfiojio"; private st ...

  8. [.Net] C# Excel操作类 ExcelHelper

    实现C#与Excel文件的交互操作,实现以下功能: 1.DataTable 导出到 Excel文件 2.Model数据实体导出到 Excel文件[List<Model>] 3.导出数据到模 ...

  9. Hadoop MapReduce编程 API入门系列之wordcount版本2(六)

    这篇博客,给大家,体会不一样的版本编程. 代码 package zhouls.bigdata.myMapReduce.wordcount4; import java.io.IOException; i ...

  10. Java基础8一面向对象

    一.JavaBean标准的定义规范 1.类中所有的属性必须是私有的,也就是说属性必须用private修饰. 2.提供一个公共无参数的构造方法. 3.为所有私有的属性提供公共的set和get方法. se ...