[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
[Web]flask-excel实现excel文件下载的前后端实现的更多相关文章
- Python Flask高级编程之RESTFul API前后端分离精讲 (网盘免费分享)
Python Flask高级编程之RESTFul API前后端分离精讲 (免费分享) 点击链接或搜索QQ号直接加群获取其它资料: 链接:https://pan.baidu.com/s/12eKrJK ...
- 基于flask和百度AI接口实现前后端的语音交互
话不多说,直接怼代码,有不懂的,可以留言 简单的实现,前后端的语音交互. import os from uuid import uuid4 from aip import AipSpeech from ...
- 无意间做了个 web 版的 JVM 监控端(前后端分离 React+Spring Boot)
之前写了JConsole.VisualVM 依赖的 JMX 技术,然后放出了一个用纯 JMX 实现的 web 版本的 JConsole 的截图,今天源码来了. 本来就是为了更多的了解 JMX,第一步就 ...
- java web课程设计(简单商城的前后端双系统,基于maven三模块开发)
1.系统分析 1.1需求分析 实现一个简单但功能完整的商城项目,从设计到实现,规范化完成该项目,锻炼javaweb项目的编写能力,理解软件工程的软件设计思想 1.2编程技术简介 本次课程主要使用的软件 ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- 淘宝玉伯引发Web前后端研发模式讨论
淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...
- Flask前后端分离项目案例
简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用postman调试. git 重构部分: token校验模块 auths认 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史
---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...
- 前后端分离djangorestframework——restful规范
restful现在非常流行,所以很有必要提一下 web服务交互 在浏览器中能看到的每个网站,都是一个web服务.那么我们在提供每个web服务的时候,都需要前后端交互,前后端交互就一定有一些实现方案,我 ...
随机推荐
- kali linux 安装wps office
1.下载wps for linux 版本 wget http://kdl.cc.ksosoft.com/wps-community/download/6757/wps-office_10.1.0.67 ...
- spring cloud Config--server
概述 使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与Spring Environment和PropertySource抽象相同,因此它们与Spr ...
- Play框架--初学笔记
目录结构 web_app 根目录 | sbt SBT Unix 批处理脚本用于启动sbt-launch.jar | sbt.bat SBT Windows 批处理脚本用于启动sbt-launch.ja ...
- iptables-snat-dnat-设置
nat internet iptables -t nat -A POSTROUTING -s 192.168.0.0/255.255.255.0 -o eth1 -j SNAT --to-source ...
- python之字符编码
1.以什么编码存的就以什么编码取出; 内存固定使用unicode编码; 我们可以控制的编码是往硬盘存放或者基于网络传输选择编码. 2.数据是最先产生于内存中,是unicode格式,要想传输需要转成by ...
- sublime3 破解
—– BEGIN LICENSE —–TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 ...
- jQuery选择器总结 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值 ...
- Python_collections_namedtuple可命名元组
namedtuple:用来构建带字段名的元组 import collections # 创建类,两种创建方法 MytupleClass = collections.namedtuple('Mytupl ...
- mysql配置完半同步复制之后报错[ERROR] The server quit without updating PID file
修改配置,MySQL启动报:[ERROR] The server quit without updating PID file [root@localhost mysql]# /etc/init.d/ ...
- Codeforces 725E Too Much Money (看题解)
Too Much Money 最关键的一点就是这个贪心可以在sqrt(n)级别算出答案. 因为最多有sqrt(n)个不同的数值加入. 我们可以发现最优肯定加入一个. 然后维护一个当前可以取的最大值, ...