如何将Django中views.py的函数与JavaScript文件关联？

第一步：配置Django URL路由 #

先在项目的urls.py里给pdf_view配置可访问的URL路径，这是JS能请求到视图的前提：

from django.urls import path
from . import views

urlpatterns = [
    # 保留你的其他路由...
    path('view-pdf/', views.pdf_view, name='view_pdf'),
]

第二步：修正视图函数的问题 #

你的pdf_view存在两处小问题，先调整后再对接JS：

• except块未返回HttpResponse，会导致请求无响应
• pdf.closed写在with块外无效，with上下文会自动关闭文件
  修正后的代码：

def pdf_view(request):
    try:
        with open('static/someData/PDF', 'rb') as pdf:
            response = HttpResponse(pdf.read(), content_type="application/pdf")
            # 若要浏览器直接预览用inline，要下载则改成attachment
            response['Content-Disposition'] = 'inline; filename=test1.pdf'
            return response
    except FileNotFoundError:  # 用文件未找到异常更精准
        return HttpResponse("PDF not found", status=404)

第三步：用JavaScript关联视图函数 #

根据需求，有三种常用实现方式：

方式1：点击按钮在新窗口打开PDF #

在HTML中添加按钮，通过JS监听点击事件跳转至PDF接口：

<button id="openPdfBtn">打开PDF</button>

<script>
document.getElementById('openPdfBtn').addEventListener('click', function() {
    window.open('/view-pdf/', '_blank');
});
</script>

方式2：将PDF嵌入当前页面（iframe方式） #

不想跳转页面的话，可通过JS创建iframe，把PDF嵌入到指定容器：

<div id="pdfContainer"></div>
<button id="loadPdfBtn">加载PDF到页面</button>

<script>
document.getElementById('loadPdfBtn').addEventListener('click', function() {
    const container = document.getElementById('pdfContainer');
    const iframe = document.createElement('iframe');
    iframe.src = '/view-pdf/';
    iframe.width = '100%';
    iframe.height = '600px';
    iframe.style.border = '1px solid #ccc';
    container.innerHTML = '';
    container.appendChild(iframe);
});
</script>

方式3：触发PDF下载 #

通过创建隐藏的a标签模拟点击，直接触发文件下载：

<button id="downloadPdfBtn">下载PDF</button>

<script>
document.getElementById('downloadPdfBtn').addEventListener('click', function() {
    const a = document.createElement('a');
    a.href = '/view-pdf/';
    a.download = 'test1.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
});
</script>

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