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()

注意事项

• 前端使用 Blob 对象无法在 IE 浏览器中下载 Excel 文件，需要使用 msSaveBlob 方法进行处理。
• 后端生成 Excel 文件的方法可以使用 openpyxl 等第三方库和模块。
• 后端返回 Excel 文件需要设置正确的 Content-Type 和 Content-Disposition。
• 前端从后端获取 Excel 文件数据时需要设置 responseType 为 blob。
• 在使用 base64 格式返回 Excel 文件时，需要将返回的数据类型设置为 json。