后端传的是二进制流，前端应该如何通过blob处理二进制文件流格式流，并实现前端下载文件流格式

思路：

　　1、通过 const blog = new Blob([data.data], { type: 'image/jpeg' }) 获取blob对象

　　2、通过 const url = window.URL.createObjectURL(blog) 获取blob地址

　　3、nodemon 会热更新，node 改动需要重启

操作步骤：

1、新建 fileServer 文件夹，在vscode中打开，安装 express 依赖

npm init -y
npm i express

2、根目录下新建 public 目录和 app.js 文件

　　public目录下存放 jpg、word、pdf 文件，做测试用，新建一个index.html

　　app.js：

const express = require('express') // npm i express
const app = express()
const path = require('path')

app.use(express.static(path.join(__dirname, 'public'))) // http://localhost:3001/img01.jpg  可以访问到这张图片

app.get('/test', (req, res) => {
  res.send('ok222222') // http://localhost:3001/test  可以访问到输出内容
})

app.listen(3001, () => {
  console.log('启动服务器')
})

　　此时，终端执行 nodemon app.js，（前提是已经提前安装nodemon：npm i nodemon -g）然后访问 http://localhost:3001/test 可以打印 “ok222222”，访问 http://localhost:3001/img01.jpg 可以预览 public 中的图片，同样的，http://localhost:3001/index.html 可以访问到页面

3、创建接口

    const express = require('express') // npm i express
    const app = express()
    const path = require('path')

    const imgPath = path.join(__dirname, 'public', 'img01.jpg')
    const wordPath = path.join(__dirname, 'public', 'word.docx')
    const pdfPath = path.join(__dirname, 'public', 'test.pdf')
    console.log(imgPath) // D:\desktop\fileServer\public\img01.jpg
    app.use(express.static(path.join(__dirname, 'public'))) // http://localhost:3001/img01.jpg  可以访问到这张图片

    app.get('/test', (req, res) => {
      res.send('ok222222') // http://localhost:3001/test  可以访问到输出内容
    })

    // 提供img下载接口
    app.get('/saveImg', (req, res) => {
      res.download(imgPath)
    })

    // 提供img预览接口
    app.get('/showImg', (req, res) => {
      res.sendFile(imgPath)
    })

    // 提供word下载接口  sendFile和download都是下载
    app.get('/saveWord', (req, res) => {
      res.sendFile(wordPath)
    })

    // 提供pdf预览接口  访问控制台打印的地址时sendFile和download都是预览，用a标签访问时都是下载
    app.get('/showPdf', (req, res) => {
      res.sendFile(pdfPath)
    })

    app.listen(3001, () => {
      console.log('启动服务器')
    })

    /*
      nodemon会热更新，node需要重启
    */

4、index.html 中点击按钮拿到接口返回的值常见 MIME 类型列表

<!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 onclick="handleDownload()">获取img地址</button>
  <br>
  <a href="http://localhost:3001/saveImg">下载img</a>
  <br>
  <a href="http://localhost:3001/showImg" target="_blank">打开img</a>
  <br>
  <button onclick="handleDownload1()">获取word地址</button>
  <br>
  <a href="http://localhost:3001/saveWord">下载word</a>
  <br>
  <button onclick="handleDownload2()">获取pdf地址</button>
  <br><a href="http://localhost:3001/showPdf">下载pdf</a>
  <br>
</body>

</html>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  function handleDownload() {
    axios({
      url: 'http://localhost:3001/saveImg',
      responseType: 'blob',
      method: 'get'
    })
      .then(data => {
        console.log(data)
        const blog = new Blob([data.data], {
          type: 'image/jpeg'
        }) // 将data数据转为blob对象
        const url = window.URL.createObjectURL(blog) // 将blob对象转为blob地址
        console.log(url)
        // 创建DOM实现下载
        // let a = document.createElement('a')
        // a.download = 'img01.jpg'
        // a.href = url
        // a.click()
      }).catch(err => {
        console.error(err)
      })
  }
  function handleDownload1() {
    axios({
      url: 'http://localhost:3001/saveWord',
      responseType: 'blob',
      method: 'get'
    })
      .then(data => {
        console.log(data)
        const blog = new Blob([data.data], {
          // type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          type: 'application/msword'
        })
        const url = window.URL.createObjectURL(blog)
        console.log(url)
      }).catch(err => {
        console.error(err)
      })
  }
  function handleDownload2() {
    axios({
      url: 'http://localhost:3001/showPdf',
      responseType: 'blob',
      method: 'get'
    })
      .then(data => {
        console.log(data)
        const blog = new Blob([data.data], {
          type: 'application/pdf'
        })
        const url = window.URL.createObjectURL(blog)
        console.log(url)
      }).catch(err => {
        console.error(err)
      })
  }
</script>