Простые способы отображения PDF-файлов в Laravel: пошаговое руководство

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

Метод 1: встраивание PDF-файла с помощью HTML-тегов
Один из самых простых способов отобразить PDF-файл в Laravel — встроить его в HTML-страницу. Вот фрагмент кода, который поможет вам начать:

<div >
    <iframe src="{{ asset('path/to/pdf/file.pdf') }}" width="100%" height="100%" frameborder="0"></iframe>
</div>

Метод 2: интеграция библиотеки PDF.js
PDF.js — это популярная библиотека JavaScript для рендеринга PDF-файлов непосредственно в браузере. Чтобы использовать его в своем приложении Laravel, выполните следующие действия:

Шаг 1. Установите PDF.js с помощью npm:

npm install pdfjs-dist

Шаг 2. Включите необходимые файлы JavaScript и CSS в макет Laravel:

<script src="{{ asset('path/to/pdfjs/pdf.js') }}"></script>
<link rel="stylesheet" href="{{ asset('path/to/pdfjs/pdf_viewer.css') }}">

Шаг 3. Отобразите PDF-файл с помощью средства просмотра PDF.js:

<div id="pdf-container"></div>
<script>
    // Load the PDF file
    const pdfUrl = "{{ asset('path/to/pdf/file.pdf') }}";
    // Render the PDF using PDF.js
    pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
        pdf.getPage(1).then(function (page) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            const viewport = page.getViewport({ scale: 1 });
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            page.render({ canvasContext: context, viewport: viewport });
            document.getElementById("pdf-container").appendChild(canvas);
        });
    });
</script>

Метод 3: Средство просмотра документов Google
Другой подход – использование средства просмотра документов Google, которое позволяет встраивать и отображать PDF-файлы с помощью iframe. Вот пример:

<iframe src="https://docs.google.com/viewer?url={{ asset('path/to/pdf/file.pdf') }}&embedded=true" width="100%" height="500" frameborder="0"></iframe>

Не забудьте выбрать метод, который лучше всего соответствует вашим конкретным требованиям, и используйте возможности Laravel для расширения возможностей отображения PDF-файлов.