前端下载文件的几种方式
前端下载文件的几种方式
前言
实习一个人负责一个管理系统的前端部分。其中，就有前端下载文件的需要。最终采用的是使用axios发送get请求的方式，因为需要携带token。但是，不应该只注重结果，也应该注重过程，不然可能一直都是拧螺丝。另外提一嘴，找工作最好还是找能去的最大的公司，虽然小公司也能学到东西，但是因为制度不完善的缘故，可能会被不好的小公司坑，问就是一行泪。(去的小公司开始对实习生下手了，甚至有请假回去答辩时被背刺的)
a链接
极简版本
实际上，如果a链接的href就是指向文件的地址的话，是可以直接下载的。这种方式下载的文件名就是原本的文件名。
<a href="https://www.clzczh.top/medias/test.xlsx">下载文件</a>
自定义文件名
通过download属性，可以实现对下载的文件进行重命名。
<a href="https://www.clzczh.top/medias/test.xlsx" download="clz.xlsx">下载文件</a>上面不能实现重命名？
这是因为通过download属性来实现对下载的文件进行重命名需要是同源路径下。
换成同源路径后，就能实现自定义文件名了
<a href="/test.xlsx" download="clz.xlsx">下载文件</a>
动态添加a标签
在上面的例子中，我们是通过点击a标签来实现下载文件的。但是，实际上，我们也可以通过动态添加a标签的形式来实现。
<button onclick="download()">下载文件</button>
<script>
function download() {
const a = document.createElement('a')
a.href = '/test.xlsx'
a.download = 'clz.xlsx'
a.click()
}
</script>结果和上面一样
指定location的href
通过指定location对象的href属性，就可以在当前页面打开URL页面，其实就和上面a链接的极简版本一样效果。
<button onclick="download()">下载文件</button>
<script>
function download() {
window.location.href = '/test.xlsx'
}
</script>无法重命名
window.open
打开指定的页面的URL
<button onclick="download()">下载文件</button>
<script>
function download() {
window.open('/test.xlsx')
}
</script>无法重命名
axios
因为下载文件其实就相当于发起get请求，所以可以使用axios来发起请求，这样子就能够很方便地携带token等信息。
因为是下载文件，所以响应类型应该是blob，用来存取二进制数据
<button onclick="download()">下载文件</button>
<script>
function download() {
axios({
url: "/test.xlsx",
method: 'GET',
responseType: 'blob', // 用来存取二进制数据
headers: {
token: 'testtest' // 可以携带token
}
}).then(res => {
console.log(res)
})
}
</script>
不过，此时并没有下载文件，因为此时是二进制数据。
所以，我们还需要将二进制数据变成文件下载。
那么，怎么将二进制数据变成文件呢？
这里在网上找到一个方法，就是通过URL.createObjectURL方法，生成对应二进制数据blob对象的URL，然后通过动态添加a标签的方法，来实现生成文件。
<button onclick="download()">下载文件</button>
<script>
function download() {
axios({
url: "/test.xlsx",
method: 'GET',
responseType: 'blob',
headers: {
token: 'testtest' // 可以携带token
}
}).then(res => {
const href = URL.createObjectURL(res.data)
// console.log(href)
const a = document.createElement('a')
a.download = 'clz.xlsx'
a.href = href
a.click()
})
}
</script>将二进制数据变成文件也可以通过FileReader的readAsDataURL来实现，该方法读取blob对象或file对象。读取成功后，能够通过onload回调函数中通过实例对象的target属性下的result属性中获取base64编码的URL。
const reader = new FileReader()
reader.readAsDataURL(res.data)
reader.onload = (e) => {
console.log(e)
const a = document.createElement('a')
a.download = 'clz.xlsx'
a.href = e.target.result
a.click()
}