Vue3.2文件下载全流程，包括后端代码，前端所有代码，开箱即用，保姆教学。

前端文件下载这一块的知识，感觉大家应该知道的很少，因为平时候练习的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)

一行一行代码写的，大家应该也可以模拟出来，并且明白文件下载的流程了吧