PDF.js — отличный проект с открытым исходным кодом, который часто обновляется и добавляются новые функции, однако с точки зрения внешнего вида он уродлив или, скажем так, выглядит устаревшим. Как насчет того, чтобы получить новейшие функции PDF и исправления из PDF.js, но при этом иметь приятный внешний вид со стороны презентации?

Программа просмотра PDF-файлов из PdfJsKit ненавязчива, она не меняет код PDF.js напрямую, она просто включает PDF.js в iframe и во время выполнения переопределяет HTML, JS и CSS, чтобы обеспечить приятный современный вид и лучший пользовательский интерфейс. структура и удобство использования, а также новые функции. Таким образом, мы всегда можем легко обновить PDF.js до последней версии и получить все исправления ошибок и улучшения.

Другие программы просмотра PDF-файлов на основе PDF.js обычно не обновляют внешний вид по умолчанию, а те, которые это делают, обычно теряют функциональность из-за разделения на компоненты, но частичной их реализации или предлагают плохой/частичный API.

Начиная

Установите пакет в свой проект:

npm install pdfjskit

Когда пакет установлен (или обновлена ​​версия), ресурсы (css, изображения и т. д.), используемые PdfJsKit, будут автоматически скопированы из node_modules\pdfjskit\dist\pdfjskit в public\pdfjskit. Публичный подкаталог вашего проекта — это обычное место для веб-ресурсов, но если ваша платформа JS имеет другую структуру каталогов, вы можете переместить ресурсы в другое место.

По умолчанию PdfJsKit загружает ресурсы из подкаталога pdfjskit относительно главной страницы, но вы можете изменить этот путь, передав специальную опцию LibraryPath в конструктор PdfViewer.

Использование

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

Обратите внимание, что пакет NPM содержит модуль ES6 pdfjskit.min.mjs, а также версия сценария pdfjskit.min.js предоставляется в каталоге GitHub dist/pdfjskit и в пакете разработчика, предлагаемом здесь.

Использование PdfJsKit в простых проектах JS с Vite

Вы можете использовать любую JS-инфраструктуру (React, Vue, Angular, Svelte, Blazor и т. д.) с PdfJsKit, однако для простоты в этом посте я покажу использование для простых JS-проектов.

Для простых проектов JS я рекомендую использовать Vite, таким образом вы можете легко импортировать из модуля в файлы HTML:

1. Создайте шаблон проекта Vite:
   

   npm create vite@latest
   

   Выберите настройки:
   

   ✔ Project name: … pdfjskit-vite-example
   ✔ Select a framework: › Vanilla
   ✔ Select a variant: › JavaScript
   

2. Будет создан подкаталог с названием вашего проекта, выполните следующие действия:
   

   cd pdfjskit-vite-example
   npm install
   npm install pdfjskit
   

3. Отредактируйте index.html и замените содержимое на:
   

4. Теперь вы можете запустить веб-сервер разработки:
   

   npm run dev
   

   который покажет:
   

   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
   ➜  press h   enter to show help    
   

   Нажмите локальный URL-адрес с помощью клавиши CTRL, чтобы запустить браузер.
   Вы увидите, что на странице отображается PDF Viewer.

Документация

• Html-документация по API
• Документация по API Markdown
• База знаний

Живые Демо

• Тестирование пакета модулей
• Тестирование пакета сценариев

Ссылки:

• GitHub
• НПМ