22.10.2023 в 21:48

Средство просмотра PDF в Next.js 13.4 с использованием @react-pdf-viewer

PDF-файлы являются широко распространенным форматом для обмена документами и информацией. В веб-приложениях часто возникает необходимость интегрировать программу просмотра PDF-файлов для отображения этих документов. В этом руководстве мы рассмотрим процесс создания простой программы просмотра PDF-файлов с помощью React и библиотеки @react-pdf-viewer. Мы также покажем, как настроить его в приложении Next.js.

Необходимые условия

Прежде чем приступить к работе, убедитесь, что в проекте установлены следующие зависимости:

@react-pdf-viewer/core: ^3.12.0
@react-pdf-viewer/default-layout: ^3.12.0
pdfjs-dist: ^3.10.111
raw-loader (in devDependencies)

Настройка проекта

Начнем с настройки нашего проекта Next.js с простым компонентом просмотра PDF-файлов. Вот структура каталогов, которую мы будем использовать:

Создание файла page.js

Внутри каталога pages создайте файл page.js. Это будет страница, на которой мы будем использовать наш компонент просмотра PDF.


// pages/page.js
import PdfViewer from "@/components/PdfViewer";
const Page = () => {
  return (
    <>
      <PdfViewer url={"https://pdfobject.com/pdf/sample.pdf"} />
    </>
  );
};
export default Page;

В этом коде мы импортируем и используем компонент PdfViewer с образцом URL-адреса PDF.

Настройка next.config.js

Далее настроим next.config.js для работы с изображениями и дополнительными правилами webpack. Нам потребуется указать домены для изображений и добавить правило для загрузки файлов .node с помощью raw-loader.


// next.config.js
const nextConfig = {
  images: {
    domains: ["img.freepik.com", "veterinaire-tour-hassan.com"],
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.node/,
      use: "raw-loader",
    });
return config;
  },
};
module.exports = nextConfig;

Эта конфигурация гарантирует, что Next.js сможет работать с указанными доменами изображений и использовать raw-loader для файлов .node.

Создание компонента PdfViewer.jsx

Теперь создадим компонент PdfViewer в каталоге components. Этот компонент будет использовать библиотеку @react-pdf-viewer/core для рендеринга PDF-файлов.

// components/PdfViewer.jsx
"use client";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/core/lib/styles/index.css";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
const PdfViewer = ({ url }) => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  return (
    <div className="h-screen w-screen">
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.10.111/build/pdf.worker.min.js">
        <Viewer
          fileUrl={url}
          plugins={[defaultLayoutPluginInstance]}
        />
      </Worker>
    </div>
  );
};
export default PdfViewer;

В этом компоненте:

Мы импортируем необходимые компоненты и стили из @react-pdf-viewer/core и @react-pdf-viewer/default-layout.
Мы создаем компонент PdfViewer, который принимает параметр url для URL-адреса PDF-файла.
Внутри компонента мы устанавливаем компоненты Worker и Viewer, предоставленные @react-pdf-viewer/core. Компонент Worker загружает рабочий сценарий PDF.js.
Мы используем плагин defaultLayoutPlugin для применения макета по умолчанию к программе просмотра PDF-файлов.
Наконец, мы отображаем программу просмотра PDF-файлов в div, занимающем весь экран.

Заключение

После установки этих файлов и правильной установки зависимостей в приложении Next.js будет создан базовый просмотрщик PDF-файлов. Для дальнейшей настройки программы можно использовать опции и возможности, предоставляемые @react-pdf-viewer/core и @react-pdf-viewer/default-layout. Данное руководство служит отправной точкой для интеграции возможностей просмотра PDF-файлов в ваши веб-приложения.

Источник:

Comment button

#JavaScript #React

189

Войти на сайт