前端将后端返回的文件流转为excel并下载

1、目的：将文件流转为excel并进行下载

下面图片是发请求之后，后端返回的文件流：

想要实现的效果是将文件流转为excel并进行下载。

2、实现步骤：

2-1、utils / exportFile.js

export function exportFile(data, type, fileName) {
  const blob = new Blob([data], {
    // type类型后端返回来的数据中会有，根据自己实际进行修改
    // 表格下载为 application/xlsx，压缩包为 application/zip等，
    type: type
  })
  const filename = fileName
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, filename)
  } else {
    var blobURL = window.URL.createObjectURL(blob)
    // 创建隐藏<a>标签进行下载
    var tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    tempLink.setAttribute('download', filename)
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)// 移除dom元素
    window.URL.revokeObjectURL(blobURL)// 释放bolb内存
  }
}

2-2、调用接口，注意一定要加responseType: 'blob'

// 引入二次封装的axios
import request from '@/utils/request'
const proxy = process.env.VUE_APP_URL;

export const exportXls = data => request({ url: `${proxy}/search/wo/export`, method: 'post', data, responseType: 'blob' })

axios的二次封装，详见此篇笔记：http://t.csdn.cn/ugWjo

2-3、在组件中去调用

2-3-1、全部导出

import { exportXls } from '@/api'
import { exportFile } from '@/utils/exportFile'
import Message from '@/utils/tips'

export default {
    methods:{
        async exportXls() {
            try {
                await exportXls(this.form).then((result) => {
                    const fileName = '客服单'
                    const contentType = 'application/vnd.ms-excel'
                    exportFile(result, contentType, fileName)
            })
          } 
            catch (error) {
                Message('数据导出失败,请重试!')
              }
           },
        }
    }

对Message消息提示的封装，详见此篇笔记：http://t.csdn.cn/eog5D

2-3-1、选中导出

<el-table size="mini" 
    :data="tableListArr.records" 
    border 
    max-height="250"
    style="text-align:center;color: #000000;margin-top:10px;background:#f8f8f8;" 
    @select="select">

        <el-table-column type="selection" width="60" align="center" fixed>
        </el-table-column>
        。。。
        。。。
</el-table>

data(){
    return {
        woIds: [],
        newSetWoids: [],
    }
}

    // 获取勾选的woId 并存储到this.woIds
    select(rows, row) {
      // true为选中, 0或false为取消选中
      this.selected = rows.length && rows.indexOf(row) !== -1;
      if (this.selected == true) {
        for (var i = 0; i < rows.length; i++) {
          this.woIds.push(rows[i].woId)
        }
        return this.woIds
      }
    },
    
    // 将this.woIds的id去重
    newSetWoids11() {
      this.newSetWoids = [...new Set(this.woIds)]
      return this.newSetWoids
    },

    // 选中导出
    async exportWoids() {
      try {
        await exportXls({ woIds: this.newSetWoids }).then((result) => {
          const fileName = '客服单'
          const contentType =
            'application/vnd.ms-excel'
          exportFile(result, contentType, fileName)
        })

      } catch (error) {
        Message('数据导出失败,请重试!')
      }
    },

  watch: {
    woIds: {
      handler: function (newVal) {
        if (newVal) {
          this.newSetWoids11()
        }
      }
    }
  },