利用tornado实现表格文件预览
项目介绍
本文将介绍笔者的一个项目,主要是利用tornado实现表格文件的预览,能够浏览的表格文件支持CSV以及Excel文件。预览的界面如下:
下面我们将看到这个功能是如何通过tornado来实现的。
代码
该项目的代码结构如下图所示:
其中主要分为四个部分:
- files
- static
- templates
- py代码
其中,files文件夹为上传的表格文件的存放路径,static为前端的静态文件,后续将不用给出介绍,读者可以从该项目的github中下载(下载地址详见后面),templates文件夹主要存放HTML文件,而py文件用于后端控制。
首先让我们看三个HTML文件,先是upload.html,其代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
<link rel="stylesheet" href="{{static_url('CSS/amazeui.min.css')}}">
<script src="{{static_url('JS/amazeui.min.js')}}"></script>
<script>
$(function() {
$('#doc-form-file').on('change', function() {
var fileNames = '';
$.each(this.files, function() {
fileNames += '<span class="am-badge">' + this.name + '</span> ';
});
$('#file-list').html(fileNames);
});
});
</script>
</head>
<body>
<div align="center">
<br><br>
<h1>表格文件上传</h1>
<form action='file' enctype="multipart/form-data" method='post'>
<div class="am-form-group am-form-file">
<button type="button" class="am-btn am-btn-primary am-btn-sm">选择要上传的文件</button>
<input id="doc-form-file" type="file" name="file" multiple>
</div>
<div id="file-list"></div>
<p>
<button type="submit" class="am-btn am-btn-default">提交</button>
</p>
</form>
<p><a href="/file_review"><button class="am-btn am-btn-danger">查看全部文件</button></a></p>
</div>
</body>
</html>
这个是文件上传的网页,界面如下:
选择上传文件,完成上传后,则会显示如下界面:
接着是fileReview.html,其代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件浏览</title>
<link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
<link rel="stylesheet" href="{{static_url('CSS/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{static_url('CSS/amazeui.min.css')}}">
</head>
<body>
<div align="center">
<br><br>
<h1>文件浏览</h1>
<ul class="list-group" style="width:800px;text-align:left">
{% for file in files %}
{% if file.endswith('.csv') or file.endswith('.xls') or file.endswith('.xlsx') %}
<li class="list-group-item"> <a href={{"/data?file="+file}}>{{ file }}</a></li>
{% end %}
{% end %}
</ul>
<a href="/file"><button class="btn btn-success" id="review">文件上传界面</button></a>
</div>
</body>
</html>
该页面主要用于显示上传的表格文件,界面如下:
最后是dataReview.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据预览</title>
<link rel="shortcut icon" href="{{static_url('images/flower.ico')}}">
<link rel="stylesheet" href="{{static_url('CSS/table.css')}}">
<link rel="stylesheet" href="{{static_url('CSS/bootstrap.min.css')}}">
</head>
<body>
<br><br>
<div align="center">
<div style="width:800px">
<table class="table table-striped table-bordered table-condensed table-responsive">
<thead id="index">
<tr>
{% for title in data[0] %}
<th>{{ title }}</th>
{% end %}
</tr>
</thead>
<tbody id="body">
{% for line in data[1:] %}
<tr>
{% for cell in line %}
<td>{{ cell }}</td>
{% end %}
</tr>
{% end %}
</tbody>
</table>
</div>
<a href="/file"><button class="btn btn-warning" id="review">文件上传界面</button></a>
</div>
</body>
</html>
该界面主要用于显示表格文件中的数据,比如刚才上传成功的Excel文件,其中的数据如下:
仅有HTML页面是不够的,我们还需要Python代码来控制网页的运行,这就是server.py,其中的代码如下:
# -*- coding: utf-8 -*-
import xlrd
import os.path
import tornado.httpserver
import tornado.ioloop
import tornado.options
import tornado.web
from tornado.options import define, options
#定义端口为12306
define("port", default=12306, help="run on the given port", type=int)
class UploadFileHandler(tornado.web.RequestHandler):
# get函数
def get(self):
self.render('upload.html')
# post函数
def post(self):
# 文件的存放路径
upload_path = os.path.join(os.path.dirname(__file__), 'files')
# 提取表单中‘name’为‘file’的文件元数据
file_metas = self.request.files['file']
for meta in file_metas:
filename = meta['filename']
filepath = os.path.join(upload_path, filename)
# 有些文件需要已二进制的形式存储,实际中可以更改
with open(filepath, 'wb') as up:
up.write(meta['body'])
self.write("<br><br>")
self.write('<p>上传%s成功!</p>' % filename)
self.write('<p><a href="/file_review"><button>查看全部文件</button></a></p>')
class FileReviewHandler(tornado.web.RequestHandler):
def get(self):
# 文件的存放路径
upload_path = os.path.join(os.path.dirname(__file__), 'files')
files = os.listdir(upload_path)
for file in files:
if os.path.isdir(file):
files.remove(file)
self.render('fileReview.html', files=files)
class DataReviewHandler(tornado.web.RequestHandler):
def get(self):
filename = self.get_argument('file')
print(filename)
# 文件的存放路径
upload_path = os.path.join(os.path.dirname(__file__), 'files')
file_path = os.path.join(upload_path, filename)
if filename.endswith('.csv'):
with open(file_path, "r") as f:
data = f.readlines()
data = [line.strip().split(',') for line in data]
elif filename.endswith('.xls') or filename.endswith('.xlsx'):
tables = xlrd.open_workbook(file_path)
table = tables.sheets()[0] # 第一张表格
nrows = table.nrows
# 循环行列表数据
data = []
for i in range(nrows):
data.append(table.row_values(i))
else:
data = []
self.render('dataReview.html', data=data)
# 主函数
def main():
# 开启tornado服务
tornado.options.parse_command_line()
# 定义app
app = tornado.web.Application(
handlers=[(r'/file', UploadFileHandler),
(r'/file_review', FileReviewHandler),
(r'/data', DataReviewHandler)
], # 网页路径控制
template_path=os.path.join(os.path.dirname(__file__), "templates"), # 模板路径
static_path=os.path.join(os.path.dirname(__file__), "static"), # 配置静态文件路径
)
http_server = tornado.httpserver.HTTPServer(app)
http_server.listen(options.port)
tornado.ioloop.IOLoop.instance().start()
main()
点击运行server.py文件,在浏览中输入“localhost:12306/file”就能看到刚才的文件上传的页面了。
到此,我们就讲完了这个项目的结构,我们省去了static文件的讲述,因为这并不影响程序的运行,只是页面的样式会比较丑陋,如果您想获得较好的浏览效果,可以从该项目的github地址中下载static文件夹,不必再自己重头写起。
使用
笔者提供了以下三种方式供读者使用该项目:
- 直接使用
- github使用
- docker使用
直接使用
读者按照上面的讲解,自己写一个项目,拷贝static文件夹,然后点击运行server.py,在浏览中输入“localhost:12306/file”就能使用该程序来浏览上传的表格了。
github使用
从该项目的github地址:https://github.com/percent4/csv_file_review 中下载该项目,命令如下:
git init
git clone https://github.com/percent4/csv_file_review
然后安装必要的第三方模块:xlrd, tornado, 点击运行server.py,在浏览中输入“localhost:12306/file”就能使用该程序来浏览上传的表格了。
docker使用
首先拉取docker镜像:
docker pull jclian91/dockertest:csv_file_review.2019.02.21.2312
然后运行该镜像:
docker run -p 12306:12306 -v $PWD/db:/root/csv_file_review/src/files -it c97f252cd6e8 bash
注意, -it后面为刚才拉取的docker镜像的ID,需要将ID替换为你刚拉取的镜像ID,运行端口为本机的12306,上传的表格数据存放在$PWD/db路径下。进入虚拟机后,运行server.py即可启动服务,
[root@fbb2c3fb6ce1 src]# ls
__init__.py files server.py static templates
[root@fbb2c3fb6ce1 src]# python server.py
在浏览中输入“localhost:12306/file”就能使用该程序来浏览上传的表格了。
总结
关于本项目的介绍就到这儿了,感谢大家阅读~
如您对本项目的源代码感兴趣,可参考网址:https://github.com/percent4/csv_file_review
注意:本人现已开通微信公众号: Python爬虫与算法(微信号为:easy_web_scrape), 欢迎大家关注哦~~
利用tornado实现表格文件预览的更多相关文章
- java实现office文件预览
不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...
- Qt SD卡 文件系统挂载、文件预览
/********************************************************************************** * Qt SD卡 文件系统挂载. ...
- Jquery.Treeview+Jquery UI制作Web文件预览
效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...
- Vue PDF文件预览vue-pdf
最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https:// ...
- 关于pc端 app端pdf,word xls等文件预览的功能
第一种用H5标签<iframe>标签实现 返回的文件类型,文件流,文件流返回必须在设置 contentType对应的Mime Type, 返回文件的物理位置. 已经实测可以支持的文件类型 ...
- 利用iterm2,在命令行预览图片,服务器也是可以的
1.首先你本地电脑上要安装iterm2软件,我们这里使用brew安装 这个是一定要装的,因为能在命令行渲染出图片文件全靠它,其实不是服务器渲染出来的,而是iterm2 官方网站:https://www ...
- odoo13之文件预览widget/模块
本文示例代码可查看github仓库:odoo13_file_preview 文件预览效果图展示 效果描述: 1.当点击图片或者文件时展开图片. 2.当点击关闭按钮时关闭图片预览. 3.当点击下载按钮时 ...
- 手把手教你用 Spring Boot搭建一个在线文件预览系统!支持ppt、doc等多种类型文件预览
昨晚搭建环境都花了好一会时间,主要在浪费在了安装 openoffice 这个依赖环境上(Mac 需要手动安装). 然后,又一步一步功能演示,记录,调试项目,并且简单研究了一下核心代码之后才把这篇文章写 ...
- java 文件转成pdf文件 预览
一.前端代码 //预览功能 preview: function () { //判断选中状态 var ids =""; var num = 0; $(".checkbox& ...
随机推荐
- 再谈async与await
回顾C#5.0是如何进行异步编程的 static void Main(string[] args) { string url = "https://docs.microsoft.com/zh ...
- 肝 hibernate 配置and增删改查 and 测试
已经通宵三天撸代码了,现在的我已经养成晚上修仙写代码的节奏了.....最近 刚刚复习到了 hibernate 谈谈 这篇文章就谈谈我对这货的理解吧. 在看这篇文章之前希望你 知道sessionfact ...
- QTimer在QThread环境中失效的问题
QTimer在非QThread的环境下能正常工作.但在QThread环境下,需要做一些改动才能正常工作. 创建Qt的线程有两种方式: 1. 子例化QThread 可以在虚函数run中启动定时器,大致的 ...
- Docker 容器
1. 容器 在过去,如果要开始编写Python应用程序,首先要做的就是在机器上安装Python运行时环境.但是,这就造成了这样一种情况:你的机器上的环境需要完美,以便你的应用程序能够按预期运行,而且 ...
- Python爬虫入门教程 62-100 30岁了,想找点文献提高自己,还被反爬了,Python搞起,反爬第2篇
学术搜索 学习理论的知识少不了去检索文献,好多文献为你的实操提供了合理的支撑,我所在的大学内网默认是有知网账户的,非常NICE 今天要完成的网站是 http://ac.scmor.com/ Googl ...
- 详解synchronized与Lock的区别与使用
知识点 1.线程与进程 在开始之前先把进程与线程进行区分一下,一个程序最少需要一个进程,而一个进程最少需要一个线程.关系是线程–>进程–>程序的大致组成结构.所以线程是程序执行流的最小单位 ...
- 如何使用JS来开发室内地图商场停车场车位管理系统
在线体验到室内地图的功能后,手机对室内地图加载一个字,要显示“快”,目前微信和电脑都可以打开室内地图的要求是3秒内打开,能有定位导航的功能最好,这样方便找到要去的地方. 对于经常逛商场的MM来说,哪里 ...
- Nuget(BagGet)使用教程
Nuget(BagGet)使用教程 1. 服务器安装ASP.NET Core 网上有很多教程,不多讲,链接给你:https://www.cnblogs.com/Agui520/p/8331499.ht ...
- Python库的安装
window下python2.python3安装包的方法 一.在线安装 安装好python.设置好环境变量后,在python安装目录下Script文件夹内会存在pip.exe和easy_install ...
- oppo设备怎么样无需root激活XPOSED框架的教程
在非常多部门的引流或业务操作中,基本上都需要使用安卓的强大XPOSED框架,近期,我们部门购来了一批新的oppo设备,基本上都都是基于7.0以上版本,基本上都不能够获得root的su超级权限,即使一部 ...