Vue 前端导出后端返回的excel文件方式

Vue 前端导出后端返回的 Excel 文件是一个常见的需求，以下是一种完整的实现攻略。

确认后端返回的 Excel 文件格式

在实现 Vue 前端导出后端返回的 Excel 文件之前，我们需要先确认后端返回 Excel 文件的格式。通常情况下，我们可以使用两种方式来返回 Excel 文件：

1. 直接返回二进制流

后端直接将 Excel 文件的二进制流作为响应的 body 返回给前端，前端使用 Blob 对象接受响应并进行下载。对于这种方式，前端代码如下：

// 定义下载 Excel 文件的方法
function downloadExcel () {
    axios({
        method: 'get',
        url: '/api/excel',
        responseType: 'blob'
    }).then((response) => {
        const blob = new Blob([response.data])
        const fileName = 'excel.xlsx'
        if (window.navigator.msSaveOrOpenBlob) { // IE
            navigator.msSaveBlob(blob, fileName)
        } else {
           const link = document.createElement('a')
           link.href = window.URL.createObjectURL(blob)
           link.download = fileName
           link.click()
           window.URL.revokeObjectURL(link.href)
        }
      })
}

后端代码如下：

# 引入相关的库和模块
import openpyxl
from flask import make_response

# 定义获取 Excel 文件数据的方法
def get_excel_data():
    wb = openpyxl.Workbook()
    ws = wb.active
    ws['A1'] = 'Hello, World!'
    response = make_response(wb.save(filename='excel.xlsx'))
    response.headers['Content-Type'] = 'application/octet-stream'
    response.headers["Content-Disposition"] = "attachment; filename=excel.xlsx"
    return response

# 定义获取 Excel 文件的接口
@app.route('/api/excel')
def download_excel():
    return get_excel_data()

2. 返回 base64 格式的 Excel 文件

后端将 Excel 文件转换成 base64 格式的字符串，作为响应的 body 返回给前端，前端使用 a 标签下载。对于这种方式，前端代码如下：

// 定义下载 Excel 文件的方法
function downloadExcel () {
    axios.get('/api/excel', {
        responseType: 'blob'
    }).then(response => {
        const blob = new Blob([response.data])
        const fileName = 'excel.xlsx'
        const URL = window.URL.createObjectURL(blob)
        const aLink = document.createElement('a')
        aLink.href = URL
        aLink.setAttribute('download', fileName)
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
    })
}

后端代码如下：

# 引入相关的库和模块
import base64
import openpyxl
from flask import jsonify

# 定义获取 Excel 文件数据的方法
def get_excel_data():
    wb = openpyxl.Workbook()
    ws = wb.active
    ws['A1'] = 'Hello, World!'
    file_content = base64.b64encode(wb.save(filename='in_memory_workbook.xlsx')).decode('utf-8')
    return jsonify({'file_content': file_content})

# 定义获取 Excel 文件的接口
@app.route('/api/excel')
def download_excel():
    return get_excel_data()