文件流下载
后台接口传过来的文件流。
1.直接打开这个接口拼参数,局限:get请求,无法携带token
如
2.通过请求接口,用blob和URL.createObjectURL(blob)来下载文件
踩到的一个坑:使用ajax请求下来的文件,文件一般都会无法打开或者乱码
原因:因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。
文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序。
解决:使用xhr去请求接口
具体代码如下:
var xhr = new XMLHttpRequest(); xhr.open("GET", `/api/total/exportExcel?month=${$(this).data("month")}&factory=${$(this).data("factory")}`, true); var name = $(this).data("factory") + getDays($(this).data("month")); xhr.setRequestHeader("token", window.localStorage.getItem("token")); xhr.responseType = "blob"; xhr.onload = function(oEvent) { var content = xhr.response; var fileName = `${name}.xlsx`; // 保存的文件名 var elink = document.createElement('a'); elink.download = fileName; elink.style.display = 'none'; var blob = new Blob([content]); elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); }; xhr.send();
即可
补充:post的话
var xhr = new XMLHttpRequest(); xhr.open("POST", "接口地址", true); xhr.setRequestHeader("Content-type", "application/json"); xhr.setRequestHeader("token", window.localStorage.getItem("orderToken")); xhr.responseType = "blob"; xhr.onload = function(oEvent) { var content = xhr.response; var fileName = `${name}.xlsx`; // 保存的文件名 var elink = document.createElement('a'); elink.download = fileName; elink.style.display = 'none'; var blob = new Blob([content]); elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); }; xhr.send("参数");
下载成blob类型的文件,可以通过类型判断
判断是json还是其他类型的
要还原json的数据:
用new FileReader()
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了