前端文件下载这一块的知识,感觉大家应该知道的很少,因为平时候练习的demo里面,基本没有关于文件下载的知识
所以我今天写一下自己关于文件下载的笔记,以下笔记内容是文件下载流程的所有知识,所用技术栈前端为Vue3.2+Ts+Axios 后端为Node + express
大家不要一看到要后端就不看了,很简单,装一个express的库,新建文件夹down,此文件夹下新建一个server.js的文件,并在此文件夹下新建一个你需要下载的文件,我是新建了一个名为1.docx文件
在server.js写下如下代码
这里__dirname就是拿到你当前文件夹的地址
const express = require('express')
const app = express()
app.use((req,res,next)=>{
res.header({
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "PUT,POST,GET",
"Access-Control-Allow-Header": "Content-Type"
});
next();
})
app.get('/downloads',(req,res)=>{
res.sendFile(__dirname + '/1.docx')
})
app.listen(8000)
node server.js启动,如果有nodemon的,就nodemon server.js。
后端搭建完成,下面开始前端代码的编写
创建Vue项目,并且安装axios,页面所有代码如下,具体意思我在下面一个一个给大家讲解
<template>
<div>
<button @click="downFile">下载</button>
</div>
</template>
<script setup lang="ts">
import axios from "axios";
const downFile = async () => {
// 创建本地的blol本地的url
const {data} = await axios.get('http://localhost:8000/downloads',{responseType:'blob'})
let blobUrl = URL.createObjectURL(data)
// 创建a标签
let link = document.createElement('a')
link.href = blobUrl
// 设置下载名
link.download = 'testdocx'
link.style.display='none'
link.click()
URL.revokeObjectURL(blobUrl)
}
</script>
<style scoped lang="less">
</style>
首先第一个{responseType:‘blob’},为什么要添加这个responseType呢,这是对文件类型的一个转化,因为在后面的URL.createObjectUR类型的转化才能完成下载
const {data} = await axios.get('http://localhost:8000/downloads',{responseType:'blob'})
第二个 let blobUrl = URL.createObjectURL(data)
let blobUrl = URL.createObjectURL(data)
//URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。
//这里我们可以知道,他的参数是 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象,这里我们就需要 Blob 对象,把它转变为一个地址。
第三个就是添加a标签,并且激活他的下载功能。
// 创建a标签
let link = document.createElement('a')
link.href = blobUrl
// 设置下载名
link.download = 'testdocx'
link.style.display='none'
link.click()
第四个 URL.revokeObjectURL(blobUrl),在每次调用 createObjectURL()
方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL方法来释放。
URL.revokeObjectURL(blobUrl)
一行一行代码写的,大家应该也可以模拟出来,并且明白文件下载的流程了吧