【Node.js】文件流下载

后端把文件以流的形式发送给前端,前端将流转成一个一个的blob文件,将这些 blob 转成url,将url放到a标签上,用于点击,下载文件,处理大型文件和动态生成的文件。

index.js

js 复制代码
import express from 'express'
import cors from 'cors'
import fs from 'fs'
import path from 'path'

const app = express()
app.use(cors())
app.use(express.json())

app.post('/download', (req, res) => {
    const fileName = req.body.fileName
    const filePath = path.join(process.cwd(), 'static', fileName)
    const content = fs.readFileSync(filePath)  // 不加 utf8 配置返回就是一个 buffer 流
    res.setHeader('Content-Type', 'application/octet-stream')  // octet-stream 二进制流
    // Content-Disposition 直接预览而不是下载 默认inline 内联模式
    // 改为 attachment 将文件当做一个附件进行下载
    res.setHeader('Content-Disposition', 'attachment;filename=' + fileName)
    res.send(content)
})

app.listen(3000,()=> {
    console.log('server is running on port 3000')
})

index.html

复制代码
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<button id="btn">download</button>
<script>
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
        fetch('http://localhost:3000/download',{
            method: 'post',
            body: JSON.stringify({
                fileName: 'cat1.png'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res=>res.arrayBuffer()).then(res=> {
            // 转成 blob
            const blob = new Blob([res], {type: 'image/png'})
            // 转成 url
            const url = URL.createObjectURL(blob)
            // 创建 a 标签挂载 url 模拟点击
            const a = document.createElement('a')
            a.href = url
            a.download = 'cat1.png'
            a.click()
        })
    });
</script>
</body>
</html>
相关推荐
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
Q_Q5110082857 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
Q_Q5110082858 小时前
python基于web的汽车班车车票管理系统/火车票预订系统/高铁预定系统 可在线选座
spring boot·python·django·flask·node.js·汽车·php
浪裡遊10 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
weixin_4050233711 小时前
包资源管理器NPM 使用
前端·npm·node.js
Q_Q51100828517 小时前
python+django/flask婚纱摄影拍照管理系统
spring boot·python·django·flask·node.js·php
长空任鸟飞_阿康17 小时前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
CS Beginner18 小时前
【node】运行windows7下的高版本node.js
node.js
水冗水孚20 小时前
fastify-sse-v2搭配EventSource实现SSE中的AI流式回复打字机效果&Fetch+ReadableStream+Chunked分块也可实现
node.js