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

接手之后, 重新选择了前端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

[Web]flask-excel实现excel文件下载的前后端实现的更多相关文章

  1. Python Flask高级编程之RESTFul API前后端分离精讲 (网盘免费分享)

    Python Flask高级编程之RESTFul API前后端分离精讲 (免费分享)  点击链接或搜索QQ号直接加群获取其它资料: 链接:https://pan.baidu.com/s/12eKrJK ...

  2. 基于flask和百度AI接口实现前后端的语音交互

    话不多说,直接怼代码,有不懂的,可以留言 简单的实现,前后端的语音交互. import os from uuid import uuid4 from aip import AipSpeech from ...

  3. 无意间做了个 web 版的 JVM 监控端(前后端分离 React+Spring Boot)

    之前写了JConsole.VisualVM 依赖的 JMX 技术,然后放出了一个用纯 JMX 实现的 web 版本的 JConsole 的截图,今天源码来了. 本来就是为了更多的了解 JMX,第一步就 ...

  4. java web课程设计(简单商城的前后端双系统,基于maven三模块开发)

    1.系统分析 1.1需求分析 实现一个简单但功能完整的商城项目,从设计到实现,规范化完成该项目,锻炼javaweb项目的编写能力,理解软件工程的软件设计思想 1.2编程技术简介 本次课程主要使用的软件 ...

  5. Flask & Vue 构建前后端分离的应用

    Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...

  6. 淘宝玉伯引发Web前后端研发模式讨论

    淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...

  7. Flask前后端分离项目案例

    简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用postman调试. git 重构部分: token校验模块 auths认 ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  9. 前后端分离djangorestframework——restful规范

    restful现在非常流行,所以很有必要提一下 web服务交互 在浏览器中能看到的每个网站,都是一个web服务.那么我们在提供每个web服务的时候,都需要前后端交互,前后端交互就一定有一些实现方案,我 ...

随机推荐

  1. BrupSuite渗透测试笔记(十一)

    一.数据查找和拓展功能的使用 1.BrupSuite高级功能在界面布局上主要分成两个部分,一是菜单栏,另一个是Engagement tools,Brup菜单下包含的数据查找Search 组件状态存储. ...

  2. uva11827 处理下输入

    /*0.012s*/ #include<cstdio> #include<algorithm> using namespace std; ], n; int gcd(int a ...

  3. hdu1198 普通的并查集

    今天开始(第三轮)并查集,,之前学的忘了一些 本题很简单直接上代码 #include<iostream> #include<cstring> #include<cstdi ...

  4. MySQL 5.7的多源复制

    MySQL 5.7已经开始支持了多源复制,相信小伙们都很激动,MySQL 5.7之前只能实现一主一从.一主多从或者多主多从的复制,如果想实现多主一从的复制,只好使用MariaDB,但是MariaDB又 ...

  5. SSM框架接收处理安卓端的json数据

    最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...

  6. Python迷宫游戏(基础版)

    # 画地图map_data = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 1, 1, 1, 1, 1, 1, 1, 1], [1, 2, 1, 0, 0, 0, ...

  7. 修改Tomcat默认连接数

    <Connector port=" protocol="HTTP/1.1" connectionTimeout=" redirectPort=" ...

  8. Spring boot+CXF开发WebService Demo

    最近工作中需要用到webservice,而且结合spring boot进行开发,参照了一些网上的资料,配置过程中出现的了一些问题,于是写了这篇博客,记录一下我这次spring boot+cxf开发的w ...

  9. 【loj6142】「2017 山东三轮集训 Day6」A 结论题+Lucas定理

    题解: 当奇数 发现答案就是C(n,1)^2+C(n,3)^2+...C(n,n)^2 倒序相加,发现就是C(2n,n) 所以答案就是C(2n,n)/2 当偶数 好像并不会证 打表出来可以得到 2.当 ...

  10. C# 之 4个访问修饰符和8个声明修饰符详解

    一.4个访问修饰符(是添加到类.结构或成员声明的关键字) [1] Public:公有的,是类型和类型成员的访问修饰符.对其访问没有限制. [2] Internal:内部的,是类型和类型成员的访问修饰符 ...