Показ PDF документа на сайте Django

Всем привет! Работаю сейчас над одним проектом, и в нём есть функция просмотра документов, без их загрузки, я попробовал много разных html-тэгов, но мне всегда выдаётся одна и таже ошибка. введите сюда описание изображения

models.py

import os

from django.db import models



class Document(models.Model):
    STATUS_CHOICES = [
        ('In_progress', 'На согласовании'),
        ('Accepted', 'Одобрен'),
        ('Not_accepted', 'Отклонен'),
    ]
    title = models.CharField(max_length=255)
    category = models.ForeignKey(DocumentCategory, on_delete=models.CASCADE)
    file = models.FileField(upload_to='docs/')
    author = models.ForeignKey('user.CrmUser', on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    status = models.CharField(max_length=20, choices=STATUS_CHOICES, null=True, blank=True, default='In_progress')
    description = models.TextField(null=True, blank=True)

    def filename(self):
        return os.path.basename(self.file.name)

    def __str__(self):
        return self.title

    class Meta:
        ordering = ['-created_at']

views.py

from documents.models import Document
from django.shortcuts import render

def docs_preview(request, doc_id):
    doc = Document.objects.get(id=doc_id)
    return render(request, 'documents/docs_preview.html', {'doc': doc})

urls.py

from django.conf import settings
from django.urls import path
from django.conf.urls.static import static
from documents.views import model_form_upload, docs_list, docs_view, docs_preview

app_name = 'documents'

urlpatterns = [
    path('upload/', model_form_upload, name='upload-doc'),
    path('', docs_list, name='docs-list'),
    path('<int:doc_id>/', docs_view, name='docs-view'),
    path('preview/<int:doc_id>/', docs_preview, name='docs-preview'),

]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

docs_preview.html

{% extends 'base.html' %}

{% block content %}
<iframe class="pdf"
        src="{{ doc.file.url }}"
        type="application/pdf"
        width="800"
        height="500">
</iframe>
{% endblock %}

Попробуйте использовать JavaScript библиотеку PDF.js для отображения PDF прямо на странице. Скачайте PDF.js или используйте ссылку на CDN (добавьте следующий скрипт в шаблон HTML):

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

Поместите свой PDF-документ в директорию static/ проекта Django. В файле views.py:

from django.shortcuts import render
from django.http import FileResponse
import os

def view_pdf(request):
    pdf_path = os.path.join('static', 'pdf', 'your_document.pdf')  # Путь к PDF
    return FileResponse(open(pdf_path, 'rb'), content_type='application/pdf')

В файле urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('view_pdf/', views.view_pdf, name='view_pdf'),
]

При переходе по URL http://localhost:8000/view_pdf/ будет открываться PDF-файл.

А чтобы отображать PDF непосредственно на веб-странице, надо создать шаблон, который будет отображать PDF на странице. В шаблоне подключить PDF.js и указать путь к документу для его отображения.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>

<h1>View PDF Document</h1>

<canvas id="pdf-canvas"></canvas>

<script>
    // Укажем путь к нашему PDF-документу
    const url = '/static/pdf/your_document.pdf';  // Путь к PDF в static

    // Загружаем PDF с помощью PDF.js
    pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
        const pdfDoc = pdfDoc_;
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');

        // Загружаем первую страницу PDF
        pdfDoc.getPage(1).then(function(page) {
            const viewport = page.getViewport({ scale: 1 });
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            page.render({
                canvasContext: context,
                viewport: viewport
            });
        });
    });
</script>

</body>
</html>

Этот код загрузит и отобразит первый лист PDF на странице, используя элемент . Проверьте, что путь к файлу PDF правильно указывает на его расположение.

Измените view, чтобы он возвращал HTML-шаблон, а не просто файл:

from django.shortcuts import render

def view_pdf(request):
    return render(request, 'view_pdf.html')  # Используем шаблон для отображения PDF

В файле urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('view_pdf/', views.view_pdf, name='view_pdf'),
]

Можно настроить CSS, чтобы контролировать размеры и внешний вид PDF, отображаемого на странице. Например:

<style>
    #pdf-canvas {
        max-width: 100%;
        border: 1px solid #ccc;
    }
</style>

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