質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.83%

Flaskを使ってHTMLに表示をさせたいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 782

Mario_11

score 81

Flaskを使ってHTMLに表示をさせたいです。
csvアップロードボタンで選択されたcsvの表示をさせたいのですがうまくいかず質問させていただきました。

from flask import Flask,render_template,request
from models.models import OnegaiContent
from models.database import db_session
from datetime import datetime
from flask import Flask, request, redirect, url_for
from werkzeug.utils import secure_filename
from flask import send_from_directory
import pandas as pd
import io, pkgutil, os

app = Flask(__name__)


@app.route("/")
@app.route("/index")
def index():
    name = request.args.get("name")
    return render_template("index.html",name=name)



def allowed_file(filename):
    ALLOWED_EXTENSIONS = set(['csv'])
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/', methods=['POST'])
def upload_file():
    UPLOAD_FOLDER = 'app/uploads'
    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # if user does not select file, browser also
        # submit a empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            uni_string = file.stream.read()     
            df = pd.read_csv(io.BytesIO(uni_string), encoding='utf8')
            for i in df.columns.values[1:]:
                print(i)
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect(url_for('uploaded_file',
                                    filename=filename))
    return df, i 
@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return render_template("upload.html", filename=filename)

if __name__ == "__main__":
    app.run(debug=True)


index.html

<!DOCTYPE html>
<html>
    <head>
        <title>{{name}}</title>
    </head>
    <h1>Upload new File</h1>
    <form method=post enctype=multipart/form-data>
      <p><input type=file name=file>
         <input type=submit value=Upload>
    </form>
    </body>
</html>


upload.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DataFrame表示テスト</title>
</head>
<body>
<h1>{{df}}</h1>
<h1>{{i}}</h1>
<h1>表示中</h1>
</body>
</html>


htmlでは「表示中」だけ出ており、 変数の df と i は表示されませんでした。
ターミナルには出力されたので値はしっかり入ってるかと思うのですが、htmlへの渡し方がわかりません。
わかる方教えてください。よろしくお願いいたします。
CSVファイルをpandasに展開する方法
Flask公式サイト

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Mario_11

    2020/02/19 19:24

    そうです!追記しておきます!

    キャンセル

  • can110

    2020/02/19 21:54

    提示コードを実行してみましたが「csvアップロードボタンで選択されたcsvの表示をさせ」る動き(html)がないためか、アップロード動作できません。

    キャンセル

  • Mario_11

    2020/02/19 22:08

    すいません、端折っていた箇所がありました。追記しましたのでお手隙の際に回答いただけると幸いです。

    キャンセル

回答 1

checkベストアンサー

+1

とりあえず以下のような感じで最低限の見栄えでアップロードされたCSVをテーブル表示できます。

app.py

# 略

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    df = pd.read_csv(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    tbl = df.to_html()
    print(tbl)
    return render_template("upload.html", tbl=tbl)

render.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DataFrame表示テスト</title>
</head>
<body>
<!-- {{変数|safe}}で変数にセットされたhtmlが埋め込まれる -->
<div>{{tbl|safe}}</div>
<h1>表示中</h1>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/19 23:18

    表示させることができました!!ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る