单击给定链接后在 HTML 模板中显示 pdf 的 Django 逻辑流程是什么

Question

我正在使用 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查看器，但我想在html模板中显示pdf查看器，例如，它应该更改为其他html文件，该文件从

base.html

扩展模板并显示使用路径

row.pdfFile.url

的 pdf 查看器

那么，如何编写一个新的 html 文件来从目录中读取 pdf

row.pdfFile.url

或者，是否还有其他方法可以解决这个问题。

谢谢

Answer 1

尝试使用这样的 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>

参考链接这里

单击给定链接后在 HTML 模板中显示 pdf 的 Django 逻辑流程是什么

问题描述投票：0回答：1

1个回答

浏览器视图

最新问题

单击给定链接后在 HTML 模板中显示 pdf 的 Django 逻辑流程是什么

问题描述 投票：0回答：1

1个回答

浏览器视图

最新问题

问题描述投票：0回答：1