时间戳

首页 > 解决方案 > 下载按钮重定向到错误页面

javascript - 下载按钮重定向到错误页面

问题描述

在我的 Django 项目中，用户将 Elasticsearch 查询提交到表单中，并返回从该查询生成的可下载报告。我们进行了一些更改，现在我正试图让返回报告的部分再次工作。但是，我的 url 模式遇到了一个问题，应该调用 view 函数来下载报告。

Download Report一旦生成报告（由 Ajax 请求检查），我就会出现一个按钮。这个想法是用户将单击该按钮，报告将出现在他们的下载文件夹中。但是，当我单击按钮时，它会将我发送到/report/return_doc/而不是/return_doc/.

将用户发送到的逻辑/return_doc/是它与我的视图中的 return_doc 函数相关联，但是我可以触发此函数并将报告下载给用户而不刷新页面/将它们发送到新的 url？或者我需要做一些完全不同的事情来使这个按钮起作用吗？

错误信息

Page not found (404)
Request Method: GET
Request URL:    http://0.0.0.0:0001/report/return_doc/
Using the URLconf defined in audit_tool_app.urls, Django tried these URL patterns, in this order:

admin/
accounts/
form/
report/ [name='form']
report/ ^static/(?P<path>.*)$
check_progress/ [name='check_progress']
return_doc/ [name='return_doc']
[name='home']
^static/(?P<path>.*)$
The current path, report/return_doc/, didn't match any of these.

审计工具/urls.py

from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.get_query, name='form'),
]  + static(settings.STATIC_URL, document_root=settings.STAT)

audit_tool_app/urls.py

"""audit_tool_app URL Configuration"""
from django.contrib import admin
from django.urls import include, path
from django.views.generic.base import TemplateView
from django.conf import settings
from django.conf.urls.static import static
from audit_tool import views

urlpatterns = [
                  path('admin/', admin.site.urls),
                  path('accounts/', include('django.contrib.auth.urls')),
                  path('form/', include('audit_tool.urls')),
                  path('report/', include('audit_tool.urls')),
                  path('check_progress/', views.check_progress, name='check_progress'),
                  path('report/return_doc/', views.return_doc, name='return_doc'),
                  path('', TemplateView.as_view(template_name='home.html'), name='home'),
              ] + static(settings.STATIC_URL, document_root=settings.STAT)

视图.py

from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
from docx import Document
import os
import threading
from .forms import QueryForm
from .models import *
import time


@login_required
def get_query(request):
    if request.method == 'POST':
        form = QueryForm(request.POST)
        if form.is_valid():
            query = form.cleaned_data["query"]
            fn = "report_" + str(time.time()).replace(".", "_") + ".docx"
            t = threading.Thread(target=generate_doc, args=(query, fn))
            t.start()
            return render(request, "audit_tool/check.html", {"fn": fn})
        else:
            return HttpResponse("Your query does not appear to be valid. Please enter a valid query and try again.")
    else:
        form = QueryForm()
        return render(request, 'audit_tool/form_template.html', {'form': form})


@login_required
def check_progress(request):
    """
    Returns status of document generation
    """
    fn = request.POST["filename"]
    file = "/app/created_files/" + fn
    if not os.path.exists(file):
        return JsonResponse({"report_in_progress": 1})
    else:
        return JsonResponse({"report_in_progress": 0})


@login_required
def return_doc(request):
    """
    Returns report to user
    """
    fn = request.POST["filename"]
    file = "/app/created_files/" + fn
    doc = Document(file)
    response = HttpResponse(content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document')
    response['Content-Disposition'] = 'attachment; filename={}'.format(fn)
    doc.save(response)
    return response

检查.html

<!-- templates/django_audit/check.html -->
{% extends 'base_login.html' %}

{% block title %}Please wait{% endblock %}

{% load static %}

{% block content %}
<script type='text/javascript' src="{% static "bootstrap/js/jquery/1.7.1/jquery.min.js" %}"></script>
<script type="text/javascript">
$(document).ready( function() {

    var fn = $('#fn').val()
    var checkInterval = setInterval(isFileComplete, 3000); //3000 is 3 seconds


    function isFileComplete() {

        $.ajax({
        url: '/check_progress/',
        type: 'POST',
        data: {
            'filename': fn,
            'csrfmiddlewaretoken': '{{ csrf_token }}',
        },
        dataType: 'json',
        success: function (data) {
            if (data.report_in_progress == 1) {
                $("#download-button").hide();
            } else {
                $("#download-button").show();
                clearInterval(checkInterval);
            }
        }
        });
   }
   });
</script>
<p><br></p>
<p><br></p>
<div class="alert alert-primary" role="alert">
  <p>Generating {{fn}}...please wait until the Download Report button appears.</p>
  <button type="button" id="download-button" value="Download" onclick="window.open('return_doc')">Download Report</button>
</div>
<input id="fn" type=hidden value="{{fn}}">
{% endblock %}

标签： javascriptpythondjangodjango-urls

解决方案

你做的比它需要的要困难得多。

POST 用于将数据发送到后端时，通常是为了更新数据库中的某些内容，或者在 get_query 视图的情况下创建文件。但是，在 return_doc 的情况下，您并没有这样做；您正在检索已经创建的内容，即文件。所以你应该继续照常做，这是发送一个 GET 请求。

但是，您没有做的事情是发送您要检索的文件的名称。在 GET 请求中，它位于查询参数中 URL 的末尾 - 例如/mypath/?filename=myfilename. 所以只需在你的路径中使用它：

onclick="window.open('/return_doc/?filename={{fn}}')"

在视图中：

fn = request.GET["filename"]

（但请注意，更好的解决方案是在 media 目录中创建文件，然后服务器可以直接访问和提供文件，而无需 return_doc URL 或视图。）

推荐阅读