Как отобразить содержимое файла json / csv на странице HTML?

Используя flask, я перечислил несколько файлов JSON / CSV на HTML-странице. Теперь, когда я нажимаю на гиперссылку, файл загружается. Но я хочу, чтобы содержимое файла отображалось на самом сайте (и, возможно, на другой странице с uri таким же, как имя файла).

Я заблокирован этой проблемой. Кто-нибудь может ответить, в чем проблема?

часть кода колбы

@app.route('/<path:req_path>')
def dir_listing(req_path):
    abs_path = os.path.join(UPLOAD_FOLDER, req_path)
    # Check if path is a file and serve
    if os.path.isfile(abs_path):
        return send_file(abs_path)    
    # Show directory contents
    files = os.listdir(abs_path)
    return render_template('file_list.html', files=files)

file_list.html

<ul>
    {% for file in files %}
    <li><a href = "{{ file }}">{{ file }}</a></li>
    {% endfor %}
    </ul>

Просмотр страницы '/' -

Как отобразить содержимое файла json / csv на странице HTML?

Вам необходимо ответить заголовком Content-Type text / html при обслуживании файлов json. developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/…

Jerinaw 19.12.2018 05:39

@Jerinaw, это работает - верните send_file (abs_path, mimetype = "application / json"). Но как сделать его jsonify на странице html?

rufus 19.12.2018 06:47

Кстати, ваши комментарии мне помогли.

rufus 19.12.2018 10:36

Круто, проголосуй за комментарий. Если вы хотите отформатировать JSON, вам придется написать JS, который преобразует JSON в HTML. Или, если в JSON уже есть форматирование текста, используйте тег HTML <pre>.

Jerinaw 19.12.2018 17:23

флаг upvote не виден в этом посте :(

rufus 19.12.2018 17:31

Ну вот, создал ответ из комментария.

Jerinaw 19.12.2018 17:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
182
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо ответить заголовком Content-Typetext/html при обслуживании файлов json.

send_file(abs_path + '/jsonfile.json', mimetype = "text/html")

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

Другие вопросы по теме