文件流下载是一种通过将文件内容以流的形式发送给客户端，实现文件下载的方法。它适用于处理大型文件或需要实时生成文件内容的情况。
安装依赖
npm install express #启动服务 提供接口
npm install cors #解决跨域
nodejs 完整版代码
核心知识响应头
Content-Type指定下载文件的 MIME 类型
application/octet-stream（二进制流数据）application/pdf：Adobe PDF 文件。application/json：JSON 数据文件image/jpeg：JPEG 图像文件
Content-Disposition指定服务器返回的内容在浏览器中的处理方式。它可以用于控制文件下载、内联显示或其他处理方式
attachment：指示浏览器将响应内容作为附件下载。通常与filename参数一起使用，用于指定下载文件的名称inline：指示浏览器直接在浏览器窗口中打开响应内容，如果内容是可识别的文件类型（例如图片或 PDF），则在浏览器中内联显示
import express from 'express'
import fs from 'fs'
import path from 'path'
import cors from 'cors'
const app = express()
app.use(cors())
app.use(express.json())
app.use(express.static('./static'))
app.post('/download', function (req, res) {
const fileName = req.body.fileName
const filePath = path.join(process.cwd(), './static', fileName)
const content = fs.readFileSync(filePath)
res.setHeader('Content-Type', 'application/octet-stream')
res.setHeader('Content-Disposition', 'attachment;filename=' + fileName)
res.send(content)
})
app.listen(3000, () => {
console.log('http://localhost:3000')
})
前端逻辑
前端核心逻辑就是接受的返回值是流的方式arrayBuffer,转成blob，生成下载链接，模拟a标签点击下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">download</button>
<script>
const btn = document.getElementById('btn')
btn.onclick = () => {
fetch('http://localhost:3000/download',{
method:"post",
body:JSON.stringify({
fileName:'1.png'
}),
headers:{
"Content-Type":"application/json"
}
}).then(res=>res.arrayBuffer()).then(res=>{
const blob = new Blob([res],{type:'image/png'})
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = '1.png'
a.click()
})
}
</script>
</body>
</html>
