Nodejs 第五十九章（文件流下载）

文件流下载是一种通过将文件内容以流的形式发送给客户端，实现文件下载的方法。它适用于处理大型文件或需要实时生成文件内容的情况。

安装依赖

sh 复制代码

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），则在浏览器中内联显示

js 复制代码

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标签点击下载

html 复制代码

<!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>