Каков логический поток Django для отображения pdf внутри HTML шаблона после нажатия на заданную ссылку

Я использую Django для создания сайта для публикации своих сообщений, все мои сообщения в формате pdf.

Как обычно, я определил свое представление и логику представления, оно возвращает контекстный словарь

views.py

class PageView(TemplateView):
     def get_context_data(self):
        context = super().get_context_data(**kwargs)
        highlightObject = Post.objects.filter(is_highlight = 1).order_by('-created_on')
        context['highlight'] = highlightObject
        return context

Затем, в моем html-файле

{% extends "base.html" %}

{% for row in highlight %}
     <h3 class="mb-auto">{{ row. Title }}</h3>
       <div class="btn-group">
            <a href="{{ row.pdfFile.url }}" class="icon-link">Reading more</a>
       </div>
{% endfor %}

До сих пор при нажатии на "Читать далее", он переключается на просмотрщик pdf, но я хочу показать просмотрщик pdf внутри html шаблона, например, он должен переключиться на другой html файл, который расширяет шаблон с base.html и показать просмотрщик pdf, используя путь row.pdfFile.url

Итак, как написать новый html файл для чтения pdf из каталога row.pdfFile.url. Или, если есть какой-либо другой способ решить эту проблему.

Спасибо

Попробуйте использовать тег HTML <embed> вот так

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Style the button that is used to open and close the collapsible content */
        .collapsible {
            background-color: #eee;
            color: #181818;
            cursor: pointer;
            padding: 8px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active,
        .collapsible:hover {
            background-color: #ccc;
        }

        /* Style the collapsible content. Note: hidden by default */
        .content {
            padding: 10px;
            display: none;
            overflow: hidden;
            background-color: #f1f1f1;
        }
    </style>
    <title>Document</title>

</head>

<body>
    {% for row in highlight %}
    <h3 class="mb-auto">{{ row. Title }}</h3>
    <button type="button" class="collapsible">Read more</button>
    <div class="content">
        <embed class="pdf" src="{{ row.pdfFile.url }}" width="800" height="500">
    </div>
    
    {% endfor %}
    
</body>
<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
</script>

</html>

ссылка здесь

Вид браузера

enter image description here

Вернуться на верх