JS 带token的且不跳转页面的下载文件方式 - Kaiqisan

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)

总结

万用的代码，建议记住，到哪里都可以用得到。