Как разметить pdf схему для js
Перейти к содержимому

Как разметить pdf схему для js

  • автор:

Библиотека просмотра PDF-файлов на JavaScript с открытым исходным кодом

Попробуйте этот бесплатный JavaScript API с открытым исходным кодом в качестве библиотеки PDF-парсера, средства просмотра, чтения и рендеринга.

Что такое PDF.js?

PDF.js — это библиотека просмотра PDF-файлов на основе 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.

Статистика GitHub

Имя:
Язык:
Звезды:
Вилки:
Лицензия:
Репозиторий последний раз обновлялся на

Начало работы с PDF.js

Есть три способа получить PDF.js и начать использовать его в своих веб-проектах.

1. Сборка из исходного кода

Вы можете клонировать репозиторий PDF.js из GitHub и собрать его самостоятельно после установки Node.js, gulp и зависимости PDF.js, выполнив следующие шаги:

Клонируйте репозиторий PDF.js git на локальном компьютере и переключитесь в папку pdf.js.

Установите Node.js

Установите зависимости PDF.js

Запустите сервер gulp и откройте программу просмотра в браузере по адресу http://localhost:8888/web/viewer.html.

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

После загрузки и извлечения предварительно созданной библиотеки дистрибутива из GitHub вы обнаружите две папки: build и веб. Файлы библиотеки PDF.js можно найти в папке build, где папка web содержит проект средства просмотра, включающий в себя файлыviewer.html,viewer.css,viewer.js и связанные файлы. Если вы проверите код view.html, вы увидите, что он ссылается на библиотеку pdf.js из папки сборки, а также на другие связанные файлы css и js.

Давайте запустим view.html в браузере, чтобы увидеть, как выглядит просмотрщик PDF.js:

Рендеринг/просмотр PDF-документов

Чтобы просто визуализировать или просмотреть PDF-документ в браузере с помощью библиотеки просмотра PDF.js, мы должны включить библиотеку PDF.js в заголовок нашего HTML-документа с помощью тега script, добавить canvas. > в тело HTML, а затем добавьте необходимый код JavaScript для использования pdfjsLib и объектов обещания для обработки асинхронной загрузки и рендеринга PDF-документа.

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

Онлайн-демо

Попробуйте эту полнофункциональную онлайн. Демо-версия PDF.js Viewer для изучения всех возможностей библиотеки PDF.js.

Заключение

PDF.js — это бесплатная библиотека просмотра PDF-файлов JavaScrpit с открытым исходным кодом и сильным сообществом. Он обеспечивает кроссбраузерную поддержку как современных, так и устаревших браузеров. Да, пользовательский опыт в устаревших браузерах может отличаться от современных, но в качестве бесплатной библиотеки они все равно хороши. Это безопасно и настраиваемо. Возможности ограничены, но в качестве средства просмотра PDF-файлов он работает отлично.

PDF.js предоставляет удобные API и архитектуру для создания веб-средства просмотра PDF. Поскольку добавление дополнительных элементов управления пользовательского интерфейса в средство просмотра занимает много времени, чтобы сэкономить время разработчиков, PDF.js также предоставляет исходный код полнофункционального и многофункционального средства просмотра PDF, который вы можете найти (проверьте файлыviewer.html,viewer.js и view.css и т. д.) в папке web дистрибутива библиотеки PDF.js.

Похожие Продукты

Split PDF in separate file in Javascript

i Have a big pdf file and i would like to split it in separate PDF files, each page in separate file. It is possible to do that in JS with node module. I search but in npm i just have modules that convert html to pdf

38k 25 25 gold badges 201 201 silver badges 273 273 bronze badges
asked Oct 9, 2015 at 13:09
1,551 8 8 gold badges 34 34 silver badges 57 57 bronze badges

2 Answers 2

After a lot of searching and nearly giving up, I did eventually find that the HummusJS library will do what I want to do! thanks to @Taxilian

1 1 1 silver badge
answered Oct 10, 2015 at 17:45
1,551 8 8 gold badges 34 34 silver badges 57 57 bronze badges
nice. Another nodejs wrapper around good library. All of them can solve you problem
Oct 12, 2015 at 9:46
appears it does wrap the HummusPDF «executable» as it were. See also pdfkit.
Sep 7, 2018 at 17:52
It seems HummusJS ending support . Is there any good alternative ?
May 2, 2020 at 16:14
github.com/jjwilly16/node-pdftk this may be the potential alternative to split pages
May 5, 2020 at 12:34

PDF format too complex for handling it via javascript. Can’t find any js libs, that doing it well

It’s easy to use other pdf parsing software and run it from node.js

use pdftk for splitting pdf

pdftk input.pdf burst output output_%02d.pdf

and run it via child-process

var exec = require('child_process').exec, child; child = exec('pdftk input.pdf burst output output_%02d.pdf', function (error, stdout, stderr) < console.log('stdout: ' + stdout); console.log('stderr: ' + stderr); if (error !== null) < console.log('exec error: ' + error); >>);

maybe you can find node module for using pdftk, but it’s too easy to run it by yourself

Как использовать библиотеку pdf-lib.js для редактирования файлов?

Планирую использовать библиотеку https://pdf-lib.js.org/ для редактирования файлов в проекте. В примерах, в коде, везде указаны полные ссылки на редактируемый пдф, и всё работает хорошо. А как мне отредактировать файл, который я загружаю через инпут? При попытке обработать такой файл получаю ошибку: Error: Failed to parse PDF document (line:0 col:16 offset=8): No PDF header found пример: https://codepen.io/Raneto4ka/pen/MWjxgQb?editors=1010

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

Рендеринг PDF с помощью HTML5 и JavaScript (pdf.js)

Андреас Гал (Andreas Gal) с коллегами из Mozilla разработали первый нормальный движок pdf.js для отображения PDF средствами HTML5/JavaScript (демо).

По мнению разработчиков, рендеринг PDF непосредственно в браузере гораздо удобнее для пользователя, потому что ему не придётся думать об установке внешних программ для просмотра PDF, многие из которых к тому же не полностью поддерживают важные спецификации PDF и заставляют осваивать непривычный интерфейс (не такой, как в браузере).

Внедрение в браузер нативных или open-source плагинов тоже нельзя назвать идеальным решением, потому что это потенциальная брешь в безопасности.

Разработка pdf.js идёт уже более месяца, но только сейчас разработчики решили объявить об этом на широкую аудиторию. Они хотели сначала завершить основные фичи (шрифты Type1, градиенты и др.), чтобы движком можно было хоть как-то пользоваться. Но совершенной неожиданностью стал большой интерес сообщества к этому проекту, а шила в мешке не утаишь, так что пришлось раскрыть карты раньше срока.

План проекта таков. Сначала они хотят довести pdf.js до идеального (попиксельно неотличимого) рендеринга на одном тестовом документе: это научный доклад с описанием JavaScript-компилятора TraceMonkey. Именно этот документ отображается в вышеупомянутом демо. Конечно, там ещё много глюков и артефактов рендеринга, но в целом понятно, о чём речь. Прямо сейчас допиливают поддержку шрифтов Type1 PostScript, так что скоро демо-документ станет гораздо приятнее на вид.

Дальше планируется реализовать другие опции PDF через canvas и обсудить, как можно с помощью JavaScript реализовать самые сложные спецификации PDF, для которых нет прямого соответствия в HTML Canvas.

Разработчики считают, что в течении трёх месяцев они смогут довести pdf.js до такого уровня, что он сможет отображать большинство PDF-документов в Сети. В будущем можно ожидать, что pdf.js станет нативной частью браузера Firefox (сначала выпустят расширение).

Авторы проекта также надеются, что и другие браузеры последуют их примеру и внедрят у себя поддержку pdf.js, код которого опубликован под свободной лицензией (модифицированная BSD).

Похожие публикации:
  1. Как вывести отсортированный массив c
  2. Как выводить текущую дату в майнкрафте
  3. Как предоставить доступ к папке через интернет
  4. Как привязать ip к домену

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *