JS 下载文件的方式
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,做项目的时候,碰到了一些私密文件的下载需要事先上传用户token凭证,所以这导致无法直接使用a标签添加地址直接从后端获取数据,所以,今天打算放下封装好的方法,从头开始。
针对下载需要使用token验证身份的时候使用。
现在以axios为例来说明方式
/* a.js */
import axios from 'axios' // 其他导包方法详见官网
axios({
methods: 'get', // 一般获取文件使用get方法
url: urlName, // 自己写路径
headers: {
'token': 'xxxxxxxxxxxxxxx' // header处添加token等凭证
},
responseType: 'blob' // 这句话是关键,意思是希望后端返回Blob类型属性
//(Blob对象表示一个不可变、原始数据的类文件对象。)
// File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
}).then({
const blob = new Blob([res.data], {
// 创建一个新的Blob对象来接收后端的文件,这里第一个参数必须是数组类型,否则下载必出错。
type: 'application/octet-stream'
// type,表明该 Blob 对象所包含数据的 MIME 类型,这需要前后端统一规划
})
let link = document.createElement('a')
let body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob) // 创建一个下载文件的URL,它指向blob,因为Blob对象在之前在接收后端发来的文件流信息。因为是Blob对象,所以不会跳转页面
// 以后还有新增的东西的话再加
link.download = 'xxxxxx' // 自己制定下载文件的文件名
// 兼容火狐浏览器
link.style.display = 'none' // 让这个a标签不可见
body.appendChild(link)
link.click() // 创建了新的a标签之后模拟点击事件,开始传输文件
body.removeChild(link) // 下载完成之后,移除按钮,垃圾回收,减少页面内存消耗
window.URL.revokeObjectURL(link.href) // 移除之前使用createObjectURL创建的URL,垃圾回收
})
关键语句:
responseType: 'blob'
const blob = new Blob(data, params)
window.URL.createObjectURL(url)
appendChild(obj)
removeChild(obj)
window.URL.revokeObjectURL(obj)
总结
万用的代码,建议记住,到哪里都可以用得到。