vue处理流文件导出下载Excel和World功能

前言

之前写过一篇导出报表的文章，不过是通过纯前端导出数据，这样处理的话数据量过
大时下载会导致浏览器卡死，所以通常更多的是配合后端来做这个功能，调用后端
的接口穿过来的流文件，然后在前端进行处理完成导出。

正篇开始

项目中需要导出excel表格和world文档，而导出的数据量能达到几十万，所以这里我们配合后端来做，通过调用后端的接口，获得传过来的二进制流文件，然后进行转换处理下载。

先调用后端的接口查看返回的数据

可以看到返回的数据流，接下来在前端进行处理，通过axios设置responseType: ‘blob’ 配合a标签进行下载，然后项目中多处需要导出表格数据，所以我们进行单独封装。

需要导出的页面添加a标签

<a id="downlink"></a>

创建exportData.js文件

import axios from 'axios'

// 导出Excel公用方法
export function exportExcel(data) {
    let loadingInstance = Loading.service({
        lock: true,
        text: '正在请求数据中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    axios({
        method: data.method,
        url: data.url,
        data: data.data,
        responseType: 'blob'
    }).then((res) => {
        const link = document.getElementById('downlink')
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.download = data.fileName //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        loadingInstance.close();
    }).catch(error => {
        this.$Notice.error({
            title: '错误',
            desc: '网络连接错误'
        })
        loadingInstance.close();
        Message.error('网络连接错误')
    })
}

页面中引入方法并调用

import { exportExcel} from '@/utils/exportData.js'

downloadFile() {
let excelObj= {
	method: 'post',
	url: '/threaten/getThreatnPerceptionExcle',
	fileName: '告警信息',
	data: {}
}
	exportExcel(excelObj)
},

而导出World文档方法是基本一样的，只需要在new Blob时设置type为’application/msword’即可同样实现。

let blob = new Blob([res.data], {type: 'application/msword'})

这样导出的功能就基本实现，导出十三万的数据量在十秒左右。