前端下载后端传输的文件
前端下载后端传输的文件方案分为以下几种：
直接打开下载地址
无法命名，仅适用于
GET直接返回blob的接口。若下载接口需携带token则无法实现。利用
a标签的download属性较合适的方案
第三方库
file-saver
直接打开
通过 window.open() 直接打开下载。
downloadFn() {
window.open('http://xxx')
}缺点：
- 无法更改名称
- 没有走接口，而是通过浏览器下载，无法做
token权限校验
a 标签下载
前置知识
createObjectURL
createObjectURL 是创建指定对象 URL 的方法，可将 Blob、File 或 MediaSource 对象转换为可供使用的 URL。
const fileInput = document.getElementById('fileInput')
const imageElement = document.getElementById('imageElement')
fileInput.addEventListener('change', (event) => {
const selectedFile = event.target.files[0]
// 创建 URL
const fileURL = URL.createObjectURL(selectedFile)
// 将 URL 赋值给图片元素的 src 属性
imageElement.src = fileURL
})注意
createObjectURL 创建的 URL 是临时的，在浏览器会话结束或使用 revokeObjectURL 方法释放之前，这个 URL 是有效的。为了避免资源浪费，建议在使用完 URL 后调用 revokeObjectURL 方法来释放与之相关的内存资源。例如：
URL.revokeObjectURL(fileURL)这样可以确保及时释放资源，避免内存泄漏。
createObjectURL 可将 Blob、File 或 MediaSource 对象转换为可供使用的 URL，在预览图像、播放音频/视频等场景中很实用。
msSaveBlob
msSaveBlob 是用于将 Blob 对象保存为文件的 Microsoft 特定方法，可用于 Internet Explorer 和 Microsoft Edge 浏览器。
以下是使用 msSaveBlob 方法保存 Blob 对象的示例：
const blob = new Blob(['Hello, World!'], { type: 'text/plain' })
if (typeof navigator.msSaveBlob === 'function') {
navigator.msSaveBlob(blob, 'example.txt')
} else {
console.log('This browser does not support msSaveBlob.')
}首先创建包含文本数据的 Blob 对象，然后检查 navigator.msSaveBlob 是否存在，确保浏览器支持此方法。
若支持，即可保存 Blob。msSaveBlob 接受两个参数：要保存的 Blob 对象和文件名。示例中将 Blob 保存为名为 "example.txt" 的文本文件。
若浏览器不支持，则输出提示信息。
注意
msSaveBlob 是微软特定方法，仅适用于 Internet Explorer 和 Microsoft Edge 浏览器。对于其他现代浏览器，通常可使用更通用的方法，如 FileSaver.js 库或通过创建链接触发文件下载。
msSaveBlob 可在 Internet Explorer 和 Microsoft Edge 浏览器中将 Blob 对象保存为文件，但需注意其局限性和跨浏览器兼容性。
download
download 是 HTML5 属性，用于指定 <a> 元素的目标资源应被下载而非在浏览器中打开。
使用 download 属性，可将链接目标资源提供给用户下载，不会自动打开或在浏览器中显示。用户点击链接时，浏览器弹出文件保存对话框。
以下是一个使用 download 属性的示例：
<a href="path/to/file.pdf" download>Download PDF</a>上述代码创建指向 "path/to/file.pdf" 的链接，添加 download 属性表示资源应下载而非打开。
还可通过为 download 属性赋值来指定下载文件名：
<a href="path/to/file.pdf" download="myFile.pdf">Download PDF</a>此时用户保存的文件将被命名为 "myFile.pdf"。
注意
download属性并非所有浏览器都完全支持，但绝大多数现代浏览器都支持。- 目标资源必须同源（即位于相同域名和协议下），否则
download属性可能无效。
download 属性是 HTML 中提供文件下载的简单常用方式，支持自定义文件名。
流程梳理
首先按 blob 格式请求接口接收二进制文件，然后判断是否有 msSaveBlob 。
有 msSaveBlob：用 msSaveBlob 下载。
无 msSaveBlob，按照以下步骤实现：
createObjectURL创建文件本地url- 创建
a标签 - 创建的
url给到a标签的href - 设置
download（即文件名） - 模拟点击下载
- 下载完毕，销毁
a标签
代码实操
// 按blob请求接口
axios.get('http://xxx', { responseType: 'blob' }).then((res) => {
if (window.navigator.msSaveBlob) {
// IE浏览器
window.navigator.msSaveBlob(
res.data,
{
type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
},
'download.ppt',
)
} else {
// 非IE
const blobURL = URL.createObjectURL(res.data) // 创建blob本地url
const link = document.createElement('a') // 创建标签
link.href = blobURL // 设置href
link.download = 'download.ppt' // 设置下载的文件名
link.style.display = 'none' // 把他隐藏
link.click()
link.remove()
URL.revokeObjectURL(blobURL) // 销毁临时地址
}
})file-saver
pnpm i file-saverimport { saveAs } from 'file-saver'axios.get('http://xxx', { responseType: 'blob' }).then((res) => {
saveAs(res.data, 'download.ppt') // 路径，名称
})拓展：预览
预览图片、excel、word 都需要一个 url。后端返回的在线地址可直接使用。
url 除线上地址外，还可使用 base64 地址。接收 blob 后将其转为 base64 即可。
转换可通过 fileReader 方法，将其转为任意需要的格式。
贡献者
duyidao
v_duyilin 刀刀
平安喜乐