Django实现点击链接后在HTML模板内展示PDF的方案咨询

一、配置详情页的视图与路由 #

要实现内嵌PDF，首先需要为单个帖子创建详情页，用来承载PDF阅读器：

1. 编写详情视图（views.py） #

from django.views.generic import DetailView
from .models import Post

class PostDetailView(DetailView):
    model = Post
    template_name = 'post_detail.html'
    context_object_name = 'post'

2. 添加URL路由（urls.py） #

from django.urls import path
from .views import PageView, PostDetailView

urlpatterns = [
    path('', PageView.as_view(template_name='your_list_template.html'), name='home'),
    path('post/<int:pk>/', PostDetailView.as_view(), name='post_detail'),
]

# 开发环境下配置媒体文件访问（确保PDF能被正确加载）
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

二、修改列表模板的跳转链接 #

将原来直接指向PDF文件的链接，改为指向详情页：

{% extends "base.html" %}

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

三、编写内嵌PDF的详情模板（post_detail.html） #

提供三种实现方式，按需选择：

方式1：HTML5 <embed> 标签（原生支持，简单快捷） #

{% extends "base.html" %}

{% block content %}
<h3>{{ post.Title }}</h3>
<!-- 宽度、高度可根据页面布局调整 -->
<embed src="{{ post.pdfFile.url }}" type="application/pdf" width="100%" height="800px">
{% endblock %}

方式2：<iframe> 标签（兼容性良好） #

{% extends "base.html" %}

{% block content %}
<h3>{{ post.Title }}</h3>
<iframe src="{{ post.pdfFile.url }}" width="100%" height="800px" frameborder="0"></iframe>
{% endblock %}

方式3：PDF.js增强展示（支持分页、搜索等功能） #

如果需要更丰富的PDF操作能力，可使用PDF.js库：

1. 下载PDF.js预编译包，解压后将build和web目录放到项目的static文件夹下
2. 编写模板代码：

{% extends "base.html" %}

{% block content %}
<h3>{{ post.Title }}</h3>
<div id="pdf-container" style="width: 100%;"></div>

<script src="{% static 'pdfjs/build/pdf.min.js' %}"></script>
<script>
  // 配置PDF.js的worker路径
  pdfjsLib.GlobalWorkerOptions.workerSrc = "{% static 'pdfjs/build/pdf.worker.min.js' %}";
  
  const pdfUrl = "{{ post.pdfFile.url }}";
  const container = document.getElementById('pdf-container');

  // 加载并渲染PDF
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    // 逐页渲染PDF内容
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      pdf.getPage(pageNum).then(page => {
        const scale = 1.2;
        const viewport = page.getViewport({ scale });
        
        // 创建canvas承载单页内容
        const canvas = document.createElement('canvas');
        canvas.style.margin = '20px 0';
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        container.appendChild(canvas);
        
        // 渲染页面到canvas
        const ctx = canvas.getContext('2d');
        page.render({
          canvasContext: ctx,
          viewport: viewport
        });
      });
    }
  }).catch(error => {
    console.error('加载PDF失败:', error);
    container.innerHTML = '<p>无法加载该PDF文件</p>';
  });
</script>
{% endblock %}

注意事项 #

• 确保settings.py中正确配置媒体文件路径：

  MEDIA_ROOT = BASE_DIR / 'media'
  MEDIA_URL = '/media/'
  

• 生产环境下不要使用static函数配置媒体路由，建议用Nginx等服务器处理媒体文件访问
• 部分浏览器可能存在安全限制，需要用户手动允许内嵌PDF加载

内容的提问来源于stack exchange，提问作者ShanN