node返回文件流给前端下载·

前端下载文件的方式不止一种。如果后端已经把待下载的文件挂载到静态目录上，那前端使用window.location.hred=“静态资源地址”即可下载文件，但对浏览器可以直接解析的文件如jpg、txt等文件，会优先在浏览器进行阅览。
如果后端没有把文件挂载到静态目录上，前端常用的方法是创建a标签进行下载，即：

<a herf="后端提供的下载文件的接口" download="下载后的文件名"></a>

---

后端代码如下（后端使用express）：

const express = require('express')
const cors = require('cors')
const fs = require('fs')
const app = express()
app.use(cors())

// 静态资源挂载
app.use('/static', express.static('./static'))

// 下载文件的接口，就算不挂载静态资源也可用
app.use('/test/download', (req, res, next) => {
  const path = __dirname + '/static/test.jpg'
  const f = fs.createReadStream(path)
  res.writeHead(200, {
    'Content-Type': 'application/force-download', // 固定写法
    'Content-Disposition': 'attachment; filename=1.jpg' // attachment实现跨域，filename设置文件名
  })
  f.pipe(res)
})

app.listen(3007, () => {
  console.log('express is running at http://127.0.0.1:3007')
})

前端代码：

<script setup>
import axios from "axios";
// 如果待下载的资源为静态资源且知道静态资源地址，可使用此方法
const downStatic = function () {
  window.location.href = "http://127.0.0.1:3007/static/test2.docx";
};
</script>

<template>
  <button @click="downStatic">点击下载静态资源</button>
  <a href="http://127.0.0.1:3007/test/download" download="newfile.png">下载其他文件</a>
</template>

<style scoped>
</style>