Библиотека за преглед на PDF файлове на JavaScript с отворен код
Опитайте този безплатен API с отворен код на JavaScript като PDF анализатор, визуализатор, четец и библиотека за рендиране.
Какво е PDF.js?
PDF.js е библиотека с отворен код, базирана на JavaScript и HTML5, разработена от Mozilla, която позволява преглеждане на PDF (Portable Document Format) документи в браузъра.
PDF.js поддържа няколко функции, които са изброени по-долу:
- Изобразяване на PDF файлове: Можете да отваряте и преглеждате, четете или изобразявате PDF документи в уеб браузъри.
- Печат/запазване на PDF файлове: PDF.js позволява също да отпечатвате или запазвате PDF документи от любимия ви уеб браузър.
- Режим на презентация: С помощта на режим на презентация можете да показвате PDF страници на цял екран и можете да навигирате до всяка страница като слайд на презентация.
- Навигация в PDF: PDF.js предоставя по-лесни контроли за навигация, чрез които можете да се придвижвате към следващата или предишната страница. Можете също така бързо да преминете към желана страница, като въведете номера на страницата.
- PDF анотация: Можете също така да коментирате PDF документи, като добавяте текст, изображения или рисунки върху PDF страниците.
- Завъртане на PDF страници: С помощта на PDF.js можете също да завъртате PDF страници по посока на часовниковата стрелка или обратно на часовниковата стрелка.
- Превъртане на PDF: PDF.js предлага хубави контроли за хоризонтално или вертикално превъртане на страници и т.н.
- Свойства на PDF документ: Не на последно място, можете също да преглеждате свойства на PDF документи в рамките на браузъра с помощта на PDF.js viewer.
Първи стъпки с PDF.js
Има три начина да получите PDF.js и да започнете да го използвате във вашите уеб проекти.
1. Изградете от източника
Можете да клонирате PDF.js хранилище от GitHub и да го изградите сами, след като инсталирате Node.js, gulp и PDF.js зависимости, като следвате стъпките по-долу:
Клонирайте git хранилището на PDF.js на локалната машина и превключете към папката pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Инсталирайте Node.js
https://nodejs.org/en/download
Инсталирайте пакета gulp глобално
npm install -g gulp-cli
Инсталирайте зависимости на PDF.js
npm install
Стартирайте gulp server и отворете viewer в браузъра на http://localhost:8888/web/viewer.html
gulp server
2. Използвайте предварително изградена дистрибуция
PDF.js също предлага предварително изградени дистрибуции заедно с изходен код, който можете да намерите в PDF.js версии в GitHub . Можете да изтеглите предварително създадена PDF.js библиотека и да започнете да я използвате.
3. Използвайте хоствана библиотека чрез CDN
PDF.js също се хоства на безплатни CDN сървъри. Няколко връзки са споделени по-долу:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Стартирайте PDF.js Viewer
След като изтеглите и извлечете предварително изградена библиотека за разпространение от GitHub, ще намерите две папки: build и уеб. Файловете на библиотеката PDF.js могат да бъдат намерени в папката build, където папката web съдържа проект за визуализатор, който включва viewer.html, viewer.css, viewer.js и свързани файлове. Ако проверите кода на viewer.html, можете да видите, че той препраща към библиотеката pdf.js от папката за компилация и други свързани css и js файлове.
Нека стартираме viewer.html в браузъра, за да видим как изглежда PDF.js viewer:
Изобразяване/преглед на PDF документи
За просто да изобразим или прегледаме PDF документ в браузъра с помощта на библиотеката за преглед на PDF.js, трябва да включим библиотеката PDF.js в заглавката на нашия HTML документ с помощта на script таг, да добавим canvas към тялото на HTML и след това добавете необходимия JavaScript код, за да използвате pdfjsLib и обещаващи обекти за обработка на асинхронно зареждане и изобразяване на PDF документа.
Горният код просто зарежда PDF документ в браузъра без потребителски интерфейс или контроли, както е показано по-долу:
Онлайн демо
Опитайте тази пълнофункционална онлайн Демонстрация на PDF.js Viewer, за да разгледате всички функции на библиотеката PDF.js.
Заключение
PDF.js е безплатна библиотека с отворен код JavaScrpit PDF Viewer със силна общност. Той осигурява поддръжка на различни браузъри както за модерни, така и за стари браузъри. Да, потребителското изживяване на старите браузъри може да не е същото като модерните, но все пак е добро като безплатна библиотека. Той е сигурен и може да се персонализира. Функциите са ограничени, но като програма за преглед на PDF работи чудесно.
PDF.js предоставя хубави API и архитектура за изграждане на уеб базиран PDF преглед. Тъй като добавянето на повече UI контроли към визуализатора отнема много време, за да се спести време на разработчиците, PDF.js също така предоставя изходен код на напълно функционален и богат на функции PDF преглед, който можете да намерите (проверете viewer.html, viewer.js и viewer.css и т.н.) в папката web на пакета за разпространение на библиотека PDF.js.