利用tornado實現表格文件預覽

時間 2019-12-05

標籤利用 tornado 實現表格文件預覽欄目 Python 简体版

原文原文鏈接

項目介紹

本文將介紹筆者的一個項目，主要是利用tornado實現表格文件的預覽，可以瀏覽的表格文件支持CSV以及Excel文件。預覽的界面以下：css

下面咱們將看到這個功能是如何經過tornado來實現的。html

代碼

該項目的代碼結構以下圖所示：前端

其中主要分爲四個部分：python

files
static
templates
py代碼

其中，files文件夾爲上傳的表格文件的存放路徑，static爲前端的靜態文件，後續將不用給出介紹，讀者能夠從該項目的github中下載（下載地址詳見後面），templates文件夾主要存放HTML文件，而py文件用於後端控制。git

首先讓咱們看三個HTML文件，先是upload.html，其代碼以下：github

<!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>

這個是文件上傳的網頁，界面以下：web

選擇上傳文件，完成上傳後，則會顯示以下界面：算法

接着是fileReview.html，其代碼以下：docker

<!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>

該頁面主要用於顯示上傳的表格文件，界面以下：bootstrap

最後是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/c...，命令以下：

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/c...

注意：本人現已開通微信公衆號： Python爬蟲與算法（微信號爲：easy_web_scrape），歡迎你們關注哦~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。