网站首页 > 教程分享 正文
很多情况下都是通过 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对象
猜你喜欢
- 2025-05-10 微信外H5跳转小程序——组件(vue项目)
- 2025-05-10 5种JavaScript实现页面跳转的方法,赶紧收藏
- 2025-05-10 防止网站被恶意反向代理(如何防止恶意网站跳转)
- 2025-05-10 DeepSeek代码之旅2:卫星地图标记方法之——Pyside6实现
- 2025-05-10 如何免费申请ssl,并且安装!(ssl 免费)
- 2025-05-10 海报丨英勇精神 世代闪光(英雄精神代代传绘画)
- 2025-05-10 使用浏览器访问PLC的自定义网页(使用浏览器访问plc的自定义网页是什么)
- 2025-05-10 详解三类的友情链接不能交换(友情链接可以随便找链接加吗)
- 2025-05-10 使用JavaScript如何获取网站网址(js语句如何获取网页元素)
- 2025-05-10 web开发-从facebook内置浏览器中网页,唤起Safari或chrome浏览器
你 发表评论:
欢迎- 05-14C#开发串口通信实例及串口基础
- 05-14C#窗体多线程启动,暂停,继续,取消
- 05-14DotNet 入门:(一)环境安装
- 05-14C#中使用命名管道进行进程通信的实例
- 05-14使用C#编程判断某一年是否为闰年
- 05-14C#学习随笔—自定义控件(线,箭头等图形)
- 05-14UE4基础知识总结(三)
- 05-14C#使用 WinForms 实现打印基础操作
- 最近发表
- 标签列表
-
- css导航条 (66)
- sqlinsert (63)
- js提交表单 (60)
- param (62)
- parentelement (65)
- jquery分享 (62)
- check约束 (64)
- curl_init (68)
- sql if语句 (69)
- import (66)
- chmod文件夹 (71)
- clearinterval (71)
- pythonrange (62)
- 数组长度 (61)
- javafx (59)
- 全局消息钩子 (64)
- sort排序 (62)
- jdbc (69)
- php网页源码 (59)
- assert h (69)
- httpclientjar (60)
- postgresql conf (59)
- winform开发 (59)
- mysql数字类型 (71)
- drawimage (61)
本文暂时没有评论,来添加一个吧(●'◡'●)