Hướng dẫn how do i display a csv file in html flask? - làm cách nào để hiển thị tệp csv trong html flask?
Chào mừng bạn đến với một hướng dẫn về cách hiển thị tệp CSV dưới dạng bảng HTML trong bình Python. Vì vậy, bạn có một tệp CSV ở đâu đó trên máy chủ? Bạn muốn đọc nó và hiển thị nó trong bảng HTML? Chà, nó thực sự là khó khăn. Đọc trên ví dụ! Tôi đã bao gồm một tệp zip với tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào. Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa. Ghi chú nhanh
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình. Mã hóa ví dụ Tải xuốngNhấn vào đây để tải xuống tất cả các mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn. Được rồi, bây giờ chúng ta hãy vào ví dụ về việc đọc một tệp trong Python và hiển thị nó trong bảng HTML với bình. Phần 1) CSV giảs1_dummy.csv
Để bắt đầu, đây là một tệp CSV giả mà chúng tôi sẽ làm việc cùng. Đối với những người mới:
Phần 2) Máy chủ Flasks2_server.py
Tập lệnh máy chủ Flask phải khá đơn giản khi bạn theo dõi nó.
Phần 3) Mẫu HTMLtemplates/s3_csv_table.html
Đúng, đó là tất cả những gì chúng ta cần trong HTML. Vòng lặp qua tệp CSV và tạo các hàng/cột. Kết thúc. Liên kết & Tài liệu tham khảoĐối với các bạn, những người đang suy nghĩ dọc theo các dòng tải lên tệp CSV lên máy chủ, sau đó tạo ra bảng, ở đó, không cần phải làm như vậy. JavaScript hiện đại thực sự có thể đọc trực tiếp tệp CSV, xem Hiển thị CSV như một bảng trong JavaScript bên dưới.
KẾT THÚCCảm ơn bạn đã đọc, và chúng tôi đã đi đến cùng. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc! Để phát triển bất kỳ dữ liệu ứng dụng web học máy được yêu cầu. Trong bài đăng này, tôi sẽ chỉ cho bạn cách tải lên và hiển thị các tệp CSV trong bình bảng HTML. Bằng cách đọc bài đăng này, bạn cũng sẽ có thể hiểu cách tải lên và đọc tệp Excel trong bình Python. Cả hai đều giống nhau. Machine Learning web application data is must required. in this post, I will show you how to upload and display CSV files in HTML table Flask. By reading this post you will also be able to understand how to upload and read excel file in python flask. Both are similar. Lưu ý: Nếu bạn là người mới trong bình, tôi đã viết một số hướng dẫn cơ bản cho bình, bạn chắc chắn có thể đọc những thứ đó. Phải đọc:
Tôi sẽ chia hướng dẫn này thành hai phần:
Trong phần này, chúng tôi sẽ đọc một tệp CSV bên trong mã bình và hiển thị tệp CSV trên trang web dưới dạng bảng HTML. Tệp CSV có thể là bất kỳ tệp nào được lưu trữ trong máy tính của bạn. Chúng tôi muốn có một nút trên trang HTML chỉ mục của chúng tôi (index_read_and_show_data.html). Nếu chúng tôi nhấp vào nút đó, tệp CSV sẽ hiển thị trên một trang khác (show_data.html). index_read_and_show_data.html (trang Index) (index page)
Ở đây trong Chỉ mục này mã HTML:
Bây giờ, hãy để viết mã phụ trợ bình của chúng tôi: Flask backend code: flask_get_post_read_csv.py from flask import Flask, render_template import pandas as pd #*** Backend operation # Read csv file in python_ flask df = pd.read_csv('data/comment.csv') # Read excel file in python_ flask # df = pd.read_excel('data/comment.xlsx') # WSGI Application # Configure template folder name # The default folder name should be "templates" else need to mention custom folder name for template path # The default folder name for static files should be "static" else need to mention custom folder for static path app = Flask(__name__, template_folder='templateFiles', static_folder='staticFiles') @app.route('/') def index(): return render_template('index_read_and_show_data.html') @app.route('/show_data', methods=("POST", "GET")) def showData(): # Convert pandas dataframe to html table flask df_html = df.to_html() return render_template('show_csv_data.html', data=df_html) if __name__=='__main__': app.run(debug = True) Ở đây trong mã này:
Trong dòng 25, chúng tôi đang lưu trữ bảng HTML được chuyển đổi của chúng tôi trong một biến có tên là Data Data_Var. Vì vậy, bây giờ chúng ta cần tạo một tệp HTML có tên là SHOW_CSV_DATA.html, nơi chúng ta cần gọi biến đó là biến dữ liệu của data_var để hiển thị tệp CSV của chúng ta (bảng HTML được chuyển đổi) ].data_var” variable to display our CSV file (converted HTML table) [return render_template(‘show_csv_data.html’, data=df_html)]. show_csv_data.html
Trong mã HTML này ở dòng 10, chúng tôi đang gọi biến đó là biến Data Data_Var để hiển thị dữ liệu của chúng tôi. Lưu ý: Đây là cách của mẫu Jinja để giao tiếp giữa mã phụ trợ và mã Frontend.Jinja Template to communicate between backend and frontend codes. Đầu ra cuối cùng tại trình duyệtTải lên và hiển thị tệp CSV trong bìnhTrong Phần 1, chúng tôi chỉ đọc một tệp CSV từ thư mục cục bộ của chúng tôi. Nếu chúng ta muốn sử dụng dữ liệu khác nhau, chúng ta phải thay đổi mã bình bên trong (pd.read_csv ()/ pd.read_excel ()). Đây không phải là cách chính xác trong khi tạo và ứng dụng web. Trang web của chúng tôi phải hỗ trợ tính năng dữ liệu tải lên. Bây giờ, hãy để liệt kê những gì chúng ta muốn đạt được với ứng dụng web này:
Vì vậy, bây giờ hãy để tạo ra trang chủ của ứng dụng Flask của chúng tôi. Tôi đang đặt tên cho tệp HTML này dưới dạng chỉ in index_upload_and_show_data.html index_upload_and_show_data.html
Choose csv file to upload Ở đây trong mã này:
Dòng 19: Tải chỉ số index_READ_AND_SHOW_DATA.HTML, là trang chủ [ 1]Upload file” the message “Choose csv file to upload” should change to “file uploaded successfully” in green color. To do this we need to write another HTML file. I am naming this HTML file as
“index_upload_and_show_data_page2.html“index_upload_and_show_data_page2.html
file uploaded successfully Dòng 24: Chuyển đổi gấu trúc DataFrame thành bảng HTML. Nếu bạn không chuyển đổi, dữ liệu CSV của bạn sẽ hiển thị dưới dạng chuỗi không phải là bảng HTML Dòng 25: Hiển thị dữ liệu được chuyển đổi thành 127.0.0.1:5000/show_data [ Trong dòng 25, chúng tôi đang lưu trữ bảng HTML được chuyển đổi của chúng tôi trong một biến có tên là Data Data_Var. Vì vậy, bây giờ chúng ta cần tạo một tệp HTML có tên là SHOW_CSV_DATA.html, nơi chúng ta cần gọi biến đó là biến dữ liệu của data_var để hiển thị tệp CSV của chúng ta (bảng HTML được chuyển đổi) ]. flask_get_post_upload_read_csv.py from flask import Flask, render_template, request, session import pandas as pd import os from werkzeug.utils import secure_filename #*** Flask configuration # Define folder to save uploaded files to process further UPLOAD_FOLDER = os.path.join('staticFiles', 'uploads') # Define allowed files (for this example I want only csv file) ALLOWED_EXTENSIONS = {'csv'} app = Flask(__name__, template_folder='templateFiles', static_folder='staticFiles') # Configure upload file path flask app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER # Define secret key to enable session app.secret_key = 'This is your secret key to utilize session in Flask' @app.route('/') def index(): return render_template('index_upload_and_show_data.html') @app.route('/', methods=("POST", "GET")) def uploadFile(): if request.method == 'POST': # upload file flask uploaded_df = request.files['uploaded-file'] # Extracting uploaded data file name data_filename = secure_filename(uploaded_df.filename) # flask upload file to database (defined uploaded folder in static path) uploaded_df.save(os.path.join(app.config['UPLOAD_FOLDER'], data_filename)) # Storing uploaded file path in flask session session['uploaded_data_file_path'] = os.path.join(app.config['UPLOAD_FOLDER'], data_filename) return render_template('index_upload_and_show_data_page2.html') @app.route('/show_data') def showData(): # Retrieving uploaded file path from session data_file_path = session.get('uploaded_data_file_path', None) # read csv file in python flask (reading uploaded csv file from uploaded server location) uploaded_df = pd.read_csv(data_file_path) # pandas dataframe to html table flask uploaded_df_html = uploaded_df.to_html() return render_template('show_csv_data.html', data_var = uploaded_df_html) if __name__=='__main__': app.run(debug = True) Ở đây trong mã này:
Trong dòng 53, chúng tôi đang lưu trữ bảng HTML được chuyển đổi của chúng tôi trong một biến có tên là Data Data_Var. Vì vậy, bây giờ chúng ta cần tạo một tệp HTML có tên là Show Show_CSV_Data.html, nơi chúng ta cần gọi biến đó là biến dữ liệu của Data_var để hiển thị tệp CSV của chúng ta (bảng HTML được chuyển đổi). Trước khi chạy mã bình của chúng tôi, chúng tôi cần tạo thư mục tải lên như được đề cập trong dòng 9. Tôi đang tạo một thư mục có tên là tải lên trên các thư mục tĩnh của chúng tôi. Bạn tạo thư mục với bất kỳ tên nào. I am creating a folder named “uploads” inside our static folder “staticFiles”. You create the folder with any name. show_csv_data.html
Bây giờ, hãy để Lừa chạy mã bình của chúng tôi Sự kết luậnTrong bài đăng này, tôi đã chỉ cho bạn cách bạn có thể tải lên và hiển thị tệp CSV trong bình HTML Bàn Python. Bằng cách đọc bài đăng này, bạn cũng có thể tải lên và đọc tệp Excel trong bình Python. Trong bài đăng này, tôi đã cho bạn một điểm bắt đầu, cách bạn có thể sử dụng phiên để lưu trữ bất kỳ biến số hoặc đường dẫn dữ liệu nào trong một số chức năng và truy xuất đường dẫn đó trong các chức năng khác nhau. Tôi cũng đã chỉ cho bạn cách bạn có thể sử dụng Phương thức Post Flask để tải lên và hiển thị tệp CSV trên trang web được phát triển bởi Flask với Python.Flask GET POST method to upload and display csv file on web page developed by Flask with Python. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào liên quan đến bài đăng này, vui lòng cho tôi biết trong phần bình luận bên dưới Xin chào, tôi là Anindya Naskar, kỹ sư khoa học dữ liệu. Tôi đã tạo trang web này để cho bạn thấy những gì tôi tin là cách tốt nhất có thể để bắt đầu trong lĩnh vực khoa học dữ liệu. Làm cách nào để hiển thị tệp CSV trong HTML bằng bình Python?Trong bài viết này, chúng tôi sẽ chuyển đổi tệp CSV thành bảng HTML bằng cách sử dụng Python Pandas và Flask Framework .. Tệp CSV mẫu:. Bước 1: Tạo một môi trường. .... Bước 2: Kích hoạt môi trường .. Bước 3: Cài đặt bình và gấu trúc .. Bước 1: Tạo thư mục 'App.py' và viết mã được đưa ra dưới đây .. Làm cách nào để hiển thị dữ liệu CSV trong HTML?Một phương pháp là sử dụng thẻ.Các thẻ pre sẽ bảo tồn định dạng văn bản được sử dụng trong tệp CSV của bạn.Đây là cách tiếp cận dễ dàng hơn và không yêu cầu chuyển đổi văn bản của tệp CSV.
…tags. Pre tags will preserve the text formatting used in your CSV file. This is the easier approach, and does not require text transformation of the CSV file. Làm cách nào để xem tệp CSV trong bình?Đọc và hiển thị tệp CSV trong bình Python.. Dòng 10: Trong trang chủ của ứng dụng Flask của chúng tôi, chúng tôi đang tạo một nút gửi có tên là Show Show CSV. Nếu chúng tôi nhấp vào nút này, một trang mới sẽ mở có tên 127.0.0.1: 5000/show_data .. Làm thế nào truyền dữ liệu từ bình sang html?Từ bình Nhập bình, Render_Template, Yêu cầu .. @app.route('/'). Sinh viên def ():. trả về render_template ('student.html'). @app.Route ('/result', setree = ['post', 'get']). Kết quả def ():. Nếu request.method == 'Post':. return render_template ("result.html", result = result). |