下载文件最简单的方式，就是后端提供一个下载地址。前端只需要a链接绑定这个下载地址即可

<a href="下载地址" download>下载</a>

download也可以等于一个值，这个值就是文件名

但是如果后端传给我们的是一个文本或者字节流，则就需要我们用Blob对象再进行一下处理，把后端给的二进制或者文本数据利用Blob对象生成一个下载地址，然后创建a链接，自动触发a链接进行下载

下载json文件

<template><el-button @click="downFile">下载普通文件</el-button>
</template><script setup lang="ts">
import { reactive } from 'vue'// 假装这是后端返回的文件内容
const obj = reactive({name: 'zs',age: 25,gender: 1
})const downFile = () => {const blob = new Blob([JSON.stringify(obj)], { type: 'application/json' })// console.log(blob) // Blob {size: 33, type: 'application/json'}// 创建一个指向类型化数组的 URL 其实就是把上面的blob数据转换为了一个可以下载的url地址let href = window.URL.createObjectURL(blob)// 下载地址既然有了，那就可以生成一个a标签，直接自动点击下，就可以下载了const a = document.createElement('a')a.href = href // a链接的下载地址a.setAttribute('download', 'data.json') // 把a标签设置为下载，并为文件取名document.body.appendChild(a) // 把a链接插入到结构中a.click() // 自动点击触发下载// 下载完成后，记得移除a标签和释放生成的下载链接document.body.removeChild(a)window.URL.revokeObjectURL(href)
}
</script>

下载zip文件

<template><el-button @click="downZipFile">下载zip文件</el-button>
</template><script setup lang="ts">
import axios from 'axios'const downZipFile = () => {// 请求zip文件数据   记得一定要给axios请求指定为blobaxios.get('后端给的地址', { responseType: 'blob' }).then((res: any) => {// console.log(res)// Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取const blob = new Blob([res], { type: 'application/zip' })// console.log(blob)// 创建一个指向类型化数组的 URL 其实就是把上面的blob数据转换为了一个可以下载的url地址let href = window.URL.createObjectURL(blob)// 下载地址既然有了，那就可以生成一个a标签，直接自动点击下，就可以下载了const a = document.createElement('a')a.href = href // a链接的下载地址// a.setAttribute('download', 'data.zip') // 把a标签设置为下载，并为文件取名document.body.appendChild(a) // 把a链接插入到结构中a.click() // 自动点击触发下载// 下载完成后，记得移除a标签和释放生成的下载链接document.body.removeChild(a)window.URL.revokeObjectURL(href)})
}
</script>

下载其他文件(例如.doc，.xls，.ppt，.tar...)也是同理的，只需要改下Blob里对应的type

下面是office文件所对应的的 Content-type 类型 Content-type 类型总结

office文件所对应的的 Content-type类型Content-type类型总结 - 简书 (jianshu.com)