Nuxt.js框架服务端渲染二进制blob流下载

Server端

在服务端添加一个 stream 属性，用来标识为流下载的接口。

[`${METHOD.get} /env/download`]: async ctx => {
    const res = await ctx.fetch('env/download', {
      method: METHOD.get,
      stream: true,
    })
    ctx.body = res[0].stream()
  },

在服务端拿到数据时 blob() 一下。 

const fetchAPI = (url, options) => {
    return fetch(url, options)
      .then(async res => {
        let json = null
        const { text = false , stream = false } = options
        if (stream) {
          json = res.blob()
        } else {
          json = await (text ? res.text() : res.json()).catch(() => ({}))
        }
        return Promise.all([res, json])
      })
      .then(data => {return data})

Clients端

在客户端使用 axios 请求接口的时候，加上 responseType标识为流。

this.$axios.$get('env/download', {responseType: 'blob'})
     .then(res => {
        resolve(res)
     })
     .catch(err => reject(err))

在客户端拿到返回结果后，即可做模拟 a 标签下载或者打开新页面展示文档等其它业务操作。