vue中blob文件下载及其它下载方式
一、Blob对象的了解
1:blob表示一个不可变、原始数据的类文件对象。Blob()构造函数返回一个新的blob对象;blob对象的内容由参数给出的值串联组成;
2:new Blob(array, options):
array:是一个由ArrayBuffer、
Blob和DOMSting等对象构成的Array,它将会被放在Blob;
options:对象中有两个参数: type:默认为"",表示将会被放入到blob中数组内容的MIME类型;endings:用于指定包含行结束符的字符串如何被写入;
二、URL api以及 URL.createObjectURL()
1:URL接口是用于解析、构造,规范化和编码的URLs;
2:new URL() 创建并返回一个URL()对象,该URL对象引用使用绝对URL字符串,相对URL字符串和基本URL字符串指定的URL;
3:属性: hash、host、hostname、href、search等
4:静态方法:
createObjecURL() :返回一个DOMSting,包含一个唯一的blob链接,这个url的生命周期和创建它的窗口document绑定
revokeObjectURL():销毁之前使用createObjectURL创建的url
三、接收并下载文件流(blob对象)
// 1、接收服务器返回数据时,需设置
responseType: 'blob'// 2、创建一个临时的url指向blob对象
var blob = new Blob(array, options)
var url = URL.createObjectURL(blob) // 3、创建之后可以模拟一系列的操作
var a = documen.createElement('a')
a.href = url // 给a标签赋上下载地址
a.style.display = 'none' // 让a标签不显示
document.body.appendChild('a') // 将a标签append到文本中
a.click() // a标签自点击 // 4、释放这个临时的对象URL
URL.revokeObjectURL(blob)
# 下方图片是自己项目中使用的方法 - 仅供参考
四、通过iframe方式下载
<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
// method方法:
handleExport(row) {
var elemIF = document.createElement('iframe')
elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
'&category=' + row.category
elemIF.style.display = 'none'
document.body.appendChild(elemIF)
}
# iframe:内联框架,就是在本页面显示其他页面内容的功能;若感兴趣了解:https://www.w3school.com.cn/tags/tag_iframe.asp
总结:js下载文件的两种方式
1:如果服务器的静态目录下有静态资源,后台人员给你文件路径,就可以通过window.location.href方式获取
2:如果服务器没有静态资源,后台会返回一个文件流,接收到将文件写入内存中,并且创建一个a标签,a链接的href属性指向内存中的文件,download属性指向文件名,模拟a标签的点击事件,然后进行下载
vue中blob文件下载及其它下载方式的更多相关文章
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
- vue中使用better-scroll的2种方式简述
前言 better-scroll官方demo展示:https://ustbhuangyi.github.io/better-scroll/#/examples/en better-scroll官方文档 ...
- django 中实现文件下载的3种方式
方法一:使用HttpResponse from django.shortcuts import HttpResponse def file_down(request): file=open('/hom ...
- Vue中常用的三种传值方式
父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- vue中scoped vs css modules
注意:此文是默认你已经具备scoped和css modules的相关基础知识,所以不做用法上的讲解. 在vue中,我们有两种方式可以定义css作用域,一种是scoped,另一种就是css module ...
- 在action中进行文件下载,下载时运行不报错,可是也不下载
在写前端下载页面时,使用ajax方式调用action中的方法,然后就将下载内容返回js中了,所以没有下载,之后改为使用Windows.location进行下载,就没有问题了. action中代码: i ...
- vue中的文件上传和下载
文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...
- 【文件下载】Java下载文件的几种方式
[文件下载]Java下载文件的几种方式 摘自:https://www.cnblogs.com/sunny3096/p/8204291.html 1.以流的方式下载. public HttpServl ...
随机推荐
- 【Azure Developer】使用PowerShell Where-Object方法过滤多维ArrayList时候,遇见的诡异问题 -- 当查找结果只有一个对象时,返回结果修改了对象结构,把多维变为一维
问题描述 编写PowerShell脚本,以多维(3维)数组中第二维度的值进行过滤,并打印出结果 #三维数组源数据 "A", "11", "Cheng ...
- Collection单列集合的继承关系(集合的层次结构)
- Azure DevOps (八) 通过流水线编译Docker镜像
上一篇文章我们完成了最简单的传统部署:上传应用到服务器上使用守护进程进行应用的部署. 本篇文章我们开始研究容器化和流水线的协作. 在开始操作之前,我们首先需要准备一下我们的dockerfile,这里我 ...
- 控制算法的划分(自适应控制、预测控制、模糊控制等,PID等;蚁群算法、神经网络,还有机器学习、人工智能中的很多方法)
一般来说,控制器的设计,分为控制框架的选取,跟参数的优化.自适应控制.预测控制.模糊控制等,跟PID一样,是控制算法(我习惯称为控制框架). 而粒子群.遗传算法(类似的还有蚁群算法.神经网络,还有机器 ...
- C++ 虚继承实现原理(虚基类表指针与虚基类表)
虚继承和虚函数是完全无相关的两个概念. 虚继承是解决C++多重继承问题的一种手段,从不同途径继承来的同一基类,会在子类中存在多份拷贝.这将存在两个问题:其一,浪费存储空间:第二,存在二义性问题,通常可 ...
- 隐藏IE10默认在input框输入内容后显示“X”按钮
::-ms-clear{display: none;} ::-ms-reveal{display: none;}
- JWT介绍及使用
目录 JWT-JSON WEB TOKEN JWT组成 header payload signature JWT校验 JWT获取信息 JJWT(java jwt api)使用 导入依赖 测试代码 JW ...
- Java JDK 动态代理实现和代码分析
JDK 动态代理 内容 一.动态代理解析 1. 代理模式 2. 为什么要使用动态代理 3. JDK 动态代理简单结构图 4. JDK 动态代理实现步骤 5. JDK 动态代理 API 5.1 java ...
- Spring Boot-@Value获取值和@ConfigurationProperties获取值的比较
@Value和@ConfigurationProperties都是用于属性的注入(相当于spring中<bean id=" " class=" "> ...
- Redis 缓存击穿(失效)、缓存穿透、缓存雪崩怎么解决?
原始数据存储在 DB 中(如 MySQL.Hbase 等),但 DB 的读写性能低.延迟高. 比如 MySQL 在 4 核 8G 上的 TPS = 5000,QPS = 10000 左右,读写平均耗时 ...