Як попередньо переглянути файли у форматі PDF у спливаючому вікні в Next.js без завантаження

6 Березня 2024 в 23:53 80

Завдання попереднього перегляду файлів у форматі PDF на веб-сайті є досить поширеним у веб-розробці. Часто виникає необхідність показати користувачам зміст PDF-документів без завантаження їх на пристрій. В даній статті ми розглянемо, як можна реалізувати попередній перегляд файлів у форматі PDF у спливаючому вікні в застосунках на базі Next.js без необхідності завантаження самого файлу.

Один із підходів до цього завдання полягає використанні бібліотеки React PDF Viewer. Ця бібліотека надає широкі можливості для роботи з PDF-файлами у веб-додатках. Для початку використання цієї бібліотеки потрібно встановити відповідні пакети:

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

1	npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

Після встановлення бібліотеки ми можемо створити компонент для попереднього перегляду PDF:

import React from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
const PdfPreview = ({ pdfUrl }) => (
    <Worker workerUrl="/pdf.worker.min.js">
        <div style={{ height: '500px' }}>
            <Viewer fileUrl={pdfUrl} />
        </div>
    </Worker>
);
export default PdfPreview;

import React from 'react';

import { Worker, Viewer } from '@react-pdf-viewer/core';

import '@react-pdf-viewer/core/lib/styles/index.css';

const PdfPreview = ({ pdfUrl }) => (

</div>

</Worker>

);

export default PdfPreview;

У цьому коді ми створюємо компонент PdfPreview, який приймає URL файлу PDF як вхідний параметр. У компоненті використовуються компоненти Worker та Viewer з бібліотеки React PDF Viewer для відображення вмісту PDF-файлу.

Тепер нам потрібно створити кнопку, за допомогою якої буде викликатися спливаюче вікно з попереднім переглядом PDF. Для цього ми можемо використати, наприклад, бібліотеку React Modal:

import React, { useState } from 'react';
import Modal from 'react-modal';
import PdfPreview from './PdfPreview';
const App = () => {
    const [modalIsOpen, setModalIsOpen] = useState(false);
    const openModal = () => {
        setModalIsOpen(true);
    };
    const closeModal = () => {
        setModalIsOpen(false);
    };
    return (
        <div>
            <button onClick={openModal}>Попередній перегляд PDF</button>
            <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
                <PdfPreview pdfUrl="/sample.pdf" />
                <button onClick={closeModal}>Закрити</button>
            </Modal>
        </div>
    );
};
export default App;

import React, { useState } from 'react';

import Modal from 'react-modal';

import PdfPreview from './PdfPreview';

const App = () => {

const [modalIsOpen, setModalIsOpen] = useState(false);

const openModal = () => {

setModalIsOpen(true);

};

const closeModal = () => {

setModalIsOpen(false);

};

return (

<div>

<button onClick={openModal}>Попередній перегляд PDF</button>

<button onClick={closeModal}>Закрити</button>

</Modal>

</div>

);

};

export default App;

У цьому коді ми створюємо компонент App, який містить кнопку “Попередній перегляд PDF”. При кліку на цю кнопку відкривається модальне вікно, в якому відображається попередній перегляд PDF-файлу за допомогою компонента PdfPreview.

Таким чином, за допомогою бібліотек React PDF Viewer та React Modal ми можемо легко реалізувати попередній перегляд файлів у форматі PDF у спливаючому вікні в застосунках на базі Next.js без необхідності завантаження самого файлу.