当前位置:首页 > 技术分析 > 正文内容

Blob文件下载方式(blob 文件下载)

ruisui885个月前 (01-24)技术分析38

很多情况下都是通过 window.location.href 来下载文件。这种方式,一般是前后端的登录态是基于 Cookie + Session 的方式,由于浏览器默认会将本地的 cookie 塞到 HTTP 请求首部字段的 Set-Cookie 中,从而实现来带用户的 SessionId,所以,我们也就可以用 window.location.href 来打开一个链接下载文件。

众所周知,还有另一种登录态的处理方式 JWT (JSON Web Token)。这种情况,一般会要求,前端在下载文件的时候在请求首部字段中添加 Token 首部字段。那么,这样一来,我们就不能直接通过 window.location.href 来下载文件。


不过,幸运的是我们有 Blob,它是浏览器端的类文件对象,基于二进制数据,我们可以通过它来优雅地处理文件下载,不限于音视频、PDF、Excel 等等。所以,今天我们就从后端导出文件到 HTTP 协议、非简单请求下的预检请求、以及最后的 Blob 处理文件,了解一番何为其然、如何使其然?

responseType: 'blob' // 这一行是关键,拿到blob数据类型的文件
axios.request({
        url: "/getDownloadFile",
        method: "post",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        responseType: "blob",
    })
    .then(res => {

    })

通过a标签打开新页面下载文件

			console.log("下载文件内容", this.content)
      const blob = new Blob([this.content], {type: 'text/plain;charset=utf-8'})

      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob);           //创建下载的链接
      downloadElement.href = href;
      let time = (new Date()).valueOf();
      downloadElement.download = '代码库' + time + '.java'; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click();                               //点击下载
      document.body.removeChild(downloadElement);            //下载完成移除元素
      window.URL.revokeObjectURL(href);                      //释放掉blob对象

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/531.html

分享给朋友:

“Blob文件下载方式(blob 文件下载)” 的相关文章

智能计费、综合管控,爱博精电帮您快速构建水电费预付费管理系统

近年来,随着企业经营管理意识的加强,商业建筑的物业管理部门对于水电费的收缴越来越重视,在实际运营中,因为服务、管理或其他方面的纠纷,商户拖欠电费的情况时有发生,管理部门为了消除收费难、垫付水电费过多、偷窃电等诸多难题,急需改变传统水电费收缴方式。但是常规的水电预付费改造面临着改造难度大、改造周期长、...

10分钟搞定gitlab-ci自动化部署

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布过程,如果每次都手动操作这一步骤就会浪费时间,效率低下。所以就有了持续集成。准备事项请提前安装以下软...

15款测试html5响应式的在线工具

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面15款工具可以方便测试你的html5响应式效果。Responsinatorhttp://www.re...

HTML5+眼球追踪?黑科技颠覆传统手机体验

今天,iH5工具推出一个新的神秘功能——眼动追踪,可以通过摄像头捕捉观众眼球活动!为了给大家具体演示该功能的使用,我做了一个案例,供大家参考。实际效果如下:案例比较简单,就是通过眼动功能获取视觉焦点位置,剔除用户看中的牌。现在,舞台的属性中多了一个“启用眼动”的选项,另外,还多了一个“启用摄像头”的...

vue-router是如何解析query参数呢? #前端

vue-router 中的 query 解析。1. 大家好,我是龙仔。今天来分享 vue-router 是如何解析快乐参数的,因为使用 vue 路由会传 query 参数和快乐参数,所以从 vue 的角度来看如何解析传递的快乐参数。2. 基础知识大家应知道,快乐参数结构如:a、b、c、a、b、c、a...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...