如何使用烧瓶有效地将大型 csv 文件加载到 html 表中？答案

【问题标题】：How to efficiently load large csv file into html table using flask?如何使用烧瓶有效地将大型 csv 文件加载到 html 表中？
【发布时间】：2021-06-07 03:27:20
【问题描述】：

我想知道使用烧瓶（我是烧瓶初学者）将 csv 数据（超过 60,000 行）加载到 html 表中的最佳做法是什么。

我能够将数据加载到 html 表中，但是页面需要很长时间才能加载到我的浏览器中。有人可以为我的场景推荐一个更好、更强大的解决方案吗？提前谢谢！

到目前为止我的代码：

app.py:

@app.route('/')
def weather_dashboard():
    filename = '/path/to/my/data.csv'
    data = pandas.read_csv(filename, header=0)
    myData = list(data.values)
    return render_template('home.html', myData=myData)

home.html:

<table class="table table-striped table-sm">
  <thead>
    <tr>
      <th>date</th>
      <th>ID</th>
      <th>Items</th>
      <th>Sold Items</th>
    </tr>
  </thead>
  <tbody>
    {% for value in myData%}
    <tr>
      <td>{{ value[0] }}</td>
      <td>{{ value[1] }}</td>
      <td>{{ value[2] }}</td>
      <td>{{ value[3] }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

提前致谢！

【问题讨论】：

csv 有没有变化？
你可以创建一个支持分页的api端点（例如接受偏移量和限制）并使html页面以块的形式动态加载（axios、async-api等）跨度>
@Maximillian，行数是的，但列总是一样的..
@Baobab1988 您是否使用csv 作为某种形式的数据库？还是在您的应用程序外部发生变化？
“用户可以在哪里搜索或过滤它” 我将专注于为查询和过滤提供良好的 UI；没有人会滚动页面上的 60K 行。请注意，您仍然需要为大型结果集提供分页。将数据存储在数据库中。

标签： python html csv flask jinja2

【解决方案1】：

这是一种以资源使用 (RAM) 为代价来提高性能的方法。它只会在文件的内容哈希更改时更新。

import csv
import hashlib
from pathlib import Path

import flask


class Cache:
    template = '''<tbody>
{% for v in data %}
  <tr>
    <td>{{ v[0] }}</td>
    <td>{{ v[1] }}</td>
    <td>{{ v[2] }}</td>
    <td>{{ v[3] }}</td>
  </tr>
{% endfor %}
</tbody>'''
    csv_file = Path(__file__).parent / 'data.csv'

    def __init__(self, app: flask.Flask):
        self._app = app
        self._cache = None
        self._filehash = None
        self()  # first-time initialization

    def __call__(self):
        filehash = self._hash_file()
        if filehash != self._filehash:
            self._filehash = filehash
            self._cache = self._render()

        return self._cache

    def _hash_file(self) -> str:
        with self.csv_file.open('rb') as f:
            md5 = hashlib.md5()
            while data := f.read(65536):  # 64kb chunks
                md5.update(data)
            return md5.hexdigest()

    def _render(self):
        with self.csv_file.open(newline='') as f:
            reader = csv.reader(f)
            next(reader)  # skip header

            with self._app.app_context():
                return flask.render_template_string(self.template, data=reader)


app = flask.Flask(__name__)
cache = Cache(app)


@app.route('/')
def weather_dashboard():
    return flask.render_template('home.html', table_body=cache())

【讨论】：

【解决方案2】：

像这段代码一样更改你的 app.py。

@app.route('/')
def weather_dashboard():
    filename = '/path/to/my/data.csv'
    data = pandas.read_csv(filename, header=0)
    myData = data.values
    return render_template('home.html', myData=myData)

【讨论】：

【解决方案3】：

试试 pandas.to_html：

@app.route('/')
def weather_dashboard():
    filename = '/path/to/my/data.csv'
    data = pandas.read_csv(filename, header=0)
    data.columns=['date','ID','Items','Sold Items']
    data.to_html(open('data.html', 'w'))
    return render_template('data.html')

【讨论】：