[Web]flask-excel实现excel文件下载的前后端实现

之前同事写了前端表格导出的功能, 前后端逻辑没有梳理, 导致后端代码十分臃肿.

接手之后, 重新选择了前端table插件, 从jqxGrid变更为bootstrapTable.

本来想依赖集成的tableExport.js在前端自己实现文件下载的, 然而这个插件存在着诸多不理想的地方.

首先导出的文件格式, excel会提示文件格式损坏报错; 其次长串数字会被截断, 并且以科学计数显示. 在bootstrapTable中将值toString依然无效.

搜索了一下前端的解决方案, 最后还是决定在后端做实现.

第一个方案是打算做一个缓存机制. 前端查询一次后, 在后端缓存结果, 接口返回数据和cacheId. 当要导出文件时, 前端通过cacheId去请求缓存数据的下载.

然而这种方案虽然合理, 但缓存机制的细节处理较为繁琐, 纠结了一下, 暂时放弃.

如果不做缓存的话, 每次导出都需要重新去做查询, 不但耗时较长, 机制也比较蠢.

最后在前同事的方案上做了些许改进. 前端首先向服务器post自己的table数据, 后端处理成excel之后再返回. 这种方案不适合大量数据导出. 数据量大的话, 网络传输也会成为问题.

代码主要有三部分, 前端业务逻辑, 前端抽象函数, 后端抽象接口.

业务逻辑:

$('#table-export').click(function(){
    var currentPage = window.location.pathname; // 文件命名参数
    var tableData = $('#table').bootstrapTable('getData'); // table数据
    var colnames = [
        {'field':'a', 'title': '国家'},
        {'field':'b', 'title':'代码'},
        {'field':'c', 'title':'抽象'},
        {'field':'d', 'title': '初音'},
        {'field':'e', 'title': '日期'},
    ]
    if (tableData.length == 0) {
        makeAlert('danger', '没有可导出数据!', $('#query-alert')); // 错误提示
        return false;
    }
    exportExcel(tableData, colnames, currentPage);
})

前端抽象函数:

// 通过form提交实现. 用ajax post也可以, 但实现方式另有不同, 没有选择. 
// 参数含data, 列名, 调用页面的名称
function exportExcel(data, colnames, page) {
    var targetUrl = $SCRIPT_ROOT + '/api/v1.0/export_excel/';

    var temp = document.createElement("form");
    temp.action = targetUrl;
    temp.method = "post";
    temp.style.display = "none";
    
    var tableData = document.createElement("textarea");
    tableData.name = "table_data";
    tableData.value = JSON.stringify(data);
    temp.appendChild(tableData);

    var columnName = document.createElement("textarea");
    columnName.name = "colnames";
    columnName.value = JSON.stringify(colnames);
    temp.appendChild(columnName);

    var pageName = document.createElement("textarea");
    pageName.name = "pageName";
    pageName.value = JSON.stringify(page);
    temp.appendChild(pageName);

    document.body.appendChild(temp);
    temp.submit();
    return false;
}

后端接口:

# 依赖flask-excel make response 实现xls文件返回
# flask-excel存在很多坑, 耐心点踩

from flask import request
from . import api
from app.utils import format_datetime
import flask_excel as excel
import json
import datetime

@api.route('/export_excel/', methods=['POST'])
def export_excel():
    if request.method == 'POST':
        table_data = json.loads(request.form['table_data'])
        colnames = json.loads(request.form['colnames'])
        page_name = request.form['pageName'].split('/')[-1]
        file_name = '{}_{}'.format(page_name,
            format_datetime(datetime.datetime.now(),'%Y%m%d%H%M%S'))
        excel_resp = make_excel_list(table_data, colnames)
        return excel.make_response_from_array(excel_resp, 'xlsx',
                                sheet_name = page_name,
                                file_name= file_name)
    else:
        return False

def make_excel_list(data, fields):
    list_data = []
    field = [x['field'] for x in fields]
    name = [x['title'] for x in fields]
    
    list_data.append(name)
    for item in data:
        tmp = []
        for fi in field:
            if fi in item.keys():
                tmp.append(item[fi])
            else:
                tmp.append('')
        list_data.append(tmp)
    return list_data