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

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

Create and Modify

Create PDF documents from scratch, or modify existing PDF documents. Draw text, images, and vector graphics. Embed your own fonts. Even embed and draw pages from other PDFs.

Written in TypeScript and compiled to pure JavaScript with no native dependencies. Works in any JavaScript runtime, including browsers, Node, Deno, and even React Native.

Split and Merge

Add, insert, and remove pages. Split a single PDF into separate ones. Or merge multiple PDFs into a single document.

Create new forms or fill and read existing fields. Check boxes, buttons, radio groups, dropdowns, option lists, and text fields are all supported.

Создание динамических PDF-файлов с использованием React и Node.js

Материал, перевод которого мы сегодня публикуем, посвящён созданию динамических PDF-файлов с использованием HTML-кода в качестве шаблона. А именно, речь пойдёт о том, как сформировать простой счёт на оплату неких товаров или услуг, динамические данные, включённые в который, берутся из состояния React-приложения. База React-приложения создана с помощью create-react-app, серверная часть проекта основана на Node.js, при её разработке использован фреймворк Express.

Автор этого материала отмечает, что он подготовил видео, в котором демонстрируется разработка проекта. Если вы решите и посмотреть видео, и прочитать статью, то рекомендуется поступить так. Сначала бегло просмотрите статью, потом включите видео и воссоздайте у себя рассматриваемую там систему. А после этого просто прочитайте статью.

Создание проекта

Создадим директорию проекта и перейдём в неё:

Создадим новое React-приложение:

После завершения создания приложения перейдём в только что созданную директорию и установим зависимости:

Создадим Express-сервер. Для этого создадим в директории проекта папку server и перейдём в неё. В ней создадим файл index.js и запустим инициализацию проекта:

Тут, для формирования package.json , достаточно несколько раз нажать на Enter . После этого выполним следующую команду для добавления в серверную часть проекта необходимых зависимостей:

Теперь, в файл client/package.json , выше раздела с описанием зависимостей, добавим следующее:

Это поможет в работе с локальным сервером из кода клиента.

Теперь нужно открыть два окна терминала.

В первом окне перейдём в директорию client и выполним следующую команду:

Во втором окне перейдём в папку server и выполним такую команду:

Начальная настройка клиента

Клиентская часть нашего проекта будет выглядеть очень просто.

Для начала, в файле src/App.js клиентской части приложения, импортируем в код зависимости:

После этого, в верхней части описания компонента, инициализируем состояние:

Удалим стандартную JSX-разметку, созданную в шаблоне приложения средствами create-react-app и возвращаемую из метода render() . Вставим туда следующее:

Создадим метод handleChange , который будет отвечать за обновление данных состояния приложения, имеющих отношение к полям ввода:

Теперь мы можем перейти к решению задачи создания PDF-файла. Та её часть, которая решается средствами клиента, заключается в создании POST-запроса к серверу. В запросе отправляется состояние приложения:

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

Начальная настройка сервера

Серверная часть проекта будет включать в себя всего два маршрута. Один нужен для создания PDF-файлов. Второй — для отправки файлов клиенту.

Для начала импортируем в файл index.js зависимости:

Инициализируем Express-приложение и настроим порт:

Настроим парсер запросов. То, что нам нужно, будет доступно как req.body . Так же настроим CORS для того, чтобы нашей работе не препятствовала бы ошибка Cross-Origin Request Blocked :

После этого запустим сервер:

Теперь мы можем заняться кодом, ответственным за создание PDF-файлов.

Создание HTML-шаблона для PDF-файлов

Нам нужен HTML-шаблон, который будет использоваться при создании PDF-файлов. В деле создания подобного шаблона перед нами открываются бесконечные возможности. В виде PDF-файла может быть представлено всё, что можно создать, используя чистый HTML и CSS. Создадим в папке server директорию documents , перейдём в неё и создадим в ней файл index.js :

Из этого файла экспортируем стрелочную функцию, которая будет возвращать весь необходимый HTML-код. При вызове этой функции можно воспользоваться параметрами, которые мы тоже здесь опишем.

Тут я дам вам пример HTML-шаблона, а вы просто скопируете его в свой проект. Но вы, конечно же, можете создать собственный шаблон.

Приведём код index.js из папки server/documents к следующему виду:

Подключим этот файл в файле server/index.js :

Создание PDF-файлов

Напомним, что на сервере мы собираемся создать два маршрута. POST-маршрут будет отвечать за приём данных с клиента и создание PDF-файла. GET-маршрут будет использоваться для отправки готового файла клиенту.

▍Маршрут create-pdf

В POST-маршруте create-pdf мы будем пользоваться командой pdf.create() , обращаясь к объекту, импортированному из модуля html-pdf .

В качестве первого параметра метода pdf.create() используется HTML-шаблон, а также данные, поступившие с клиента.

Для того, что возвратит pdf.create() , мы вызовем метод toFile() , передав ему имя, которое хотим назначить PDF-документу, а также стрелочную функцию обратного вызова. Эта функция, в случае возникновения ошибки, выполнит команду res.send(Promise.reject()) . В том случае, если всё прошло успешно — она выполнит команду res.send(Promise.resolve()) .

▍Маршрут fetch-pdf

Заодно создадим и маршрут, который будет использоваться после того, как, по запросу клиента, будет успешно создан PDF-файл. Здесь мы просто берём готовый документ и отправляем его клиенту с использованием res.sendFile() :

Клиентская функция createAndDownloadPdf

Теперь мы можем вернуться к клиентскому коду и продолжить работу над функцией createAndDownloadPdf . Здесь мы выполняем POST-запрос к серверу с использованием модуля axios . Сейчас эта функция выглядит так:

Если после выполнения POST-запроса к серверу был создан PDF-документ — нам нужно выполнить и GET-запрос, в ответ на который сервер отправит клиенту готовый документ.

Для реализации такой схемы поведения мы, после вызова axios.post() , вызываем . then() . Сделать это нам позволяет то, что в ответ на POST-запрос клиента мы возвращаем с сервера промис, который может быть либо успешно разрешён, либо отклонён.

Дополним функцию следующим кодом:

Тут можно обратить внимание на то, что в качестве responseType используется blob . Прежде чем мы продвинемся дальше — давайте поговорим о том, что это такое.

Объекты Blob

Blob — это иммутабельный объект, представляющий собой некие необработанные данные. Такие объекты часто используются для работы с данными, которые могут быть представлены не в родном формате JavaScript. Подобные объекты представляют собой последовательности байтов, хранящие, например, данные файлов. Может показаться, что объект Blob хранит ссылку на файл, но на самом деле это не так. Эти объекты хранят данные, с которыми можно работать. Например — их можно сохранять в файлы.

Завершение работы над проектом

Теперь, когда мы знаем о том, что представляют собой объекты Blob , мы можем воспользоваться ещё одним вызовом .then() , создав в нём, на основе res.data , новый Blob -объект. При создании этого объекта передадим его конструктору параметр, указывающий на то, что данные, которые будет хранить объект, имеют тип application/pdf . После этого мы можем воспользоваться методом saveAs() , который импортировали из модуля file-saver , и сохранить данные в файл. В итоге код метода createAndDowndloadPdf будет выглядеть так, как показано ниже:

Вот как выглядит интерфейс приложения в браузере.

Приложение в браузере

После заполнения полей и нажатия на кнопку Download PDF осуществляется передача данных на сервер и загрузка с него PDF-документа.

Загрузка PDF-документа

А вот — сам PDF-документ.

PDF-документ, созданный программно

Итоги

Мы рассмотрели механизм, который позволяет программно создавать PDF-файлы. Вот GitHub-репозиторий с кодом проекта. Надеемся, идеи, которые вы встретили в этом материале, найдут применение в ваших разработках.

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

Формат PDF — один из наиболее распространенных форматов документов для передачи информации. В динамических веб-приложениях вам может потребоваться экспортировать данные в документ, и PDF обычно является популярным вариантом. В этой статье мы обсудим, как сгенерировать файлы PDF в NodeJS с помощью пакета NPM pdfkit .

PDFKit — это библиотека для создания PDF- файлов на JavaScript для Node.js, которая обеспечивает простой способ создания многостраничных PDF-документов для печати.

Начало работы с PDFKit

Создадим каталог проекта и инициализируем проект Node с настройками по умолчанию:

Затем давайте выполним install pdfkit :

Чтобы использовать модуль в проекте, мы импортируем его через require() :

Создание PDF-документа с помощью PDFKit

Чтобы создать PDF-документ, нам также потребуется импортировать модуль fs (файловой системы). Мы передадим содержимое нашего PDF-файла в записываемый поток fs , чтобы сохранить его. Давайте посмотрим, как это сделать:

Сначала мы импортируем необходимые модули, после чего создаем экземпляр PDFDocument . Этот экземпляр является читаемым потоком. Мы направим этот поток в записываемый поток, чтобы сохранить файл.

Для этого мы используем функцию pipe() и сохраняем результат в нашем корневом каталоге в SampleDocument.pdf . После создания мы можем добавить к нему содержимое с помощью функции text .

Когда мы запускаем код, в корневой папке нашего проекта создается файл PDF с именем SampleDocument.pdf :

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

Форматирование текста в PDF файле

Конечно, pdfkit позволяет нам делать гораздо больше, чем просто добавлять в документ неформатированный текст. Давайте посмотрим на некоторые функции, которые он предлагает.

Размещение текста

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

Вы можете изменить место печати текста на текущей странице, добавив координаты x и y того места, где вы хотите разместить текст, в качестве аргументов функции text() .

Это полезно, потому что позволяет точно настроить расположение текста, тем более что документы PDF имеют универсальный вид независимо от машины / ОС, на которой они открываются. Это также позволит вам, например, печатать текст поверх другого текста:

Запуск этого кода даст нам:

Перенос текста и выравнивание

Модуль pdfkit автоматически обертывает строки так, чтобы они помещались между полями или в предоставленных width (при написании текста в Столбцах). Другими словами, параметр lineBreak установлен в true по умолчанию. Вы можете изменить его на false при вызове функции text() :

Новые страницы также добавляются автоматически по мере необходимости, т.е. как только контент, который вы хотите добавить, не помещается на текущей странице целиком. Однако вы также можете переключиться на следующую страницу перед заполнением предыдущей, просто выполнив:

Что касается выравнивания, в pdfkit нам доступны обычные параметры — left (по умолчанию) right , center и justify . Обратите внимание, что установка определенного выравнивания с lineBreak установленным как false не будет работать, даже если текст может уместиться в строку.

Точно так же параметр align устанавливается путем передачи в функцию text() объекта, содержащего пары ключ-значение. Давайте посмотрим на несколько примеров выравнивания:

Выполнение приведенного выше кода даст нам PDF-файл, который выглядит следующим образом:

Стилизация текста

Модуль pdfkit также обеспечивает опции, которые могут быть использованы для стилизации текста в PDF — документах. Мы рассмотрим некоторые из наиболее важных опций стилизации, полный список опций вы можете найти в руководстве.

Мы можем передать функции text() различные параметры в виде пар ключ-значение, а также связать несколько других функций перед вызовом text() .

Очень важно отметить, что такие функции как fillColor() (и позже font() , fontSize() и т.д.) будут воздействовать все вызовы text() после этого вызова:

При запуске этого кода будет создан файл PDF со следующим содержанием:

Изменение стилей в середине абзаца немного сложнее, поскольку при объединении нескольких функций text() в цепочку по умолчанию добавляется новая строка после каждой. Мы можем избежать этого, установив для параметр lineBreak первого вызова text() в false :

Что даст нам желаемый результат:

Создание списков

Чтобы добавить список элементов в документ PDF, в экземпляре PDFDocument есть функция list() , которая принимает массив строковых элементов (или вложенные массивы строк) и отображает их в виде маркированного списка:

Шрифты

PDFKit поставляется с 14 стандартными шрифтами, которые можно использовать в документах PDF. Любой из этих шрифтов можно передать функции font() класса PDFDocument и связать с text() :

Вы также можете добавить дополнительные шрифты, передав путь к файлу шрифта в качестве аргумента функции font() , а также имя конкретного шрифта, который вы хотите, если в файле есть набор шрифтов. В качестве альтернативы вы можете дать новому шрифту имя, чтобы к нему можно было получить доступ по этому имени, а не по пути к файлу:

Вызовы font() могут быть связаны с другими функциями, как в примере c fillColor() .

Вы также можете установить размер шрифта с помощью функции fontSize() . Давайте посмотрим на несколько примеров:

Запуск этого даст нам следующий PDF-файл в качестве вывода:

Добавление изображений

Еще одна распространенная вещь, которую вы можете добавить в свои PDF-файлы, — это изображения. Вы можете вызвать функцию image() в экземпляре документа и передать путь или URI изображения, которое вы хотите включить.

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

Если вы установите width и height — изображение будет растянуто, чтобы соответствовать указанным параметрам. Если один из них не указан, изображение масштабируется пропорционально указанному параметру:

Запуск этого кода даст нам:

Вы также можете масштабировать изображение, задав коэффициент scale . Кроме того, вы можете указать массив fit или cover , в котором изображение будет масштабировано, чтобы соответствовать предоставленному прямоугольнику или покрывать его, соответственно. Если вы предоставляете массив fit или cover , вы также можете установить горизонтальное выравнивание ( align ) и вертикальное выравнивание ( valign ):

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

Create and Modify

Create PDF documents from scratch, or modify existing PDF documents. Draw text, images, and vector graphics. Embed your own fonts. Even embed and draw pages from other PDFs.

Written in TypeScript and compiled to pure JavaScript with no native dependencies. Works in any JavaScript runtime, including browsers, Node, Deno, and even React Native.

Split and Merge

Add, insert, and remove pages. Split a single PDF into separate ones. Or merge multiple PDFs into a single document.

Create new forms or fill and read existing fields. Check boxes, buttons, radio groups, dropdowns, option lists, and text fields are all supported.

6 библиотек JavaScript для создания PDF

Перевод статьи «A full comparison of 6 JS libraries for generating PDFs».

Image by Matthias Haltenhof from Pixabay

В этой статье я сравню несколько JS-библиотек для генерации PDF. Сравнивать будем по следующим критериям:

• среда выполнения
• поддерживаемые модули
• поддержка TypeScript
• пользовательские шрифты
• простота использования.

Надеюсь, что после прочтения этой статьи вам будет проще подобрать подходящую библиотеку для своего следующего приложения.

1. PDFKit

PDFKit — одна из первых библиотек для создания PDF, появившихся в огромной экосистеме JavaScript. Она доступна с 2012 года и в 2021 году все еще получает обновления.

Использовать эту библиотеку немного сложнее, чем другие. Но когда мы будем разбирать другие библиотеки, вы заметите, что некоторые из них по сути являются врапперами (обертками) для PDFKit.

PDFKit предлагает поддержку и Node, и браузера через Webpack. Она поддерживает пользовательские шрифты и встраивание изображений, но у нее нет высокоуровневого API.

Стоит отметить, что документация библиотеки довольно сложная. Разработчику потребуется некоторое время, чтобы в ней освоиться, и поначалу создавать PDF будет не самой легкой задачей.

• Работает в Node и браузере — с некоторыми сложностями
• TypeScript — поддерживается
• Пользовательские шрифты — следует соблюдать осторожность при использовании в браузере
• Простота использования — библиотека несколько сложная.

2. pdfmake

pdfmake — это враппер, построенный вокруг PDFKit. Основное отличие этой библиотеки — парадигма программирования. PDFKit придерживается классического императивного стиля, а pdfmake исповедует декларативный подход.

Благодаря этому отличию вы сможете сосредоточиться на том, что хотите сделать, не тратя драгоценное время на то, чтобы объяснить библиотеке, как достичь желаемого результата.

Но не все то золото, что блестит. Вы можете столкнуться с проблемами при попытке встроить пользовательские шрифты, используя Webpack. К сожалению, в интернете довольно мало документации по этой проблеме. Но если вы не используете Webpack, вы запросто сможете клонировать git-репозиторий и запустить скрипт для встраивания шрифтов.

• Работает в Node и браузере — следует соблюдать осторожность при использовании Webpack
• TypeScript — поддерживается
• Пользовательские шрифты — придется встраивать самостоятельно
• Простота использования — на высоте.

3. jsPDF

jsPDF — очень популярная библиотека (это видно по ее статистике на GitHub), и это не случайно: она отличается высокой надежностью и имеет хорошую поддержку. Модули экспортируются согласно AMD-стандарту, благодаря чему достигается простота использования и с Node, и с браузерами.

Как и в случае с PDFKit, API jsPDF предлагают императивный шаблон, из-за чего довольно трудно создать сложный макет.

Встраивать шрифты не сложно, но требуется сделать дополнительный шаг: конвертировать их в TTF.

jsPDF — не самая простая библиотека для освоения, но у нее очень подробная документация, так что вы сможете разобраться с любой возникшей проблемой.

• Работает в Node и браузере — да
• TypeScript — поддерживается
• Пользовательские шрифты — нужно конвертировать в ttf-файлы
• Простота использования — библиотека несколько сложная.

4. Puppeteer

Как вы наверное знаете, Puppeteer — это библиотека Node, предоставляющая высокоуровневый API для контроля Chrome. Но помимо этого она также может использоваться для создания PDF.

Шаблоны должны писаться на HTML, в силу чего jsPDF проста в использовании для веб-разработчиков.

Вот хорошая статья о том, как пользоваться этой библиотекой для создания PDF: Generate a PDF from HTML with puppeteer.

Puppeteer имеет два основных недостатка:

• необходимо реализовывать бэкенд-решение
• каждый раз, когда вам нужно создать PDF, нужно запускать Puppeteer, а это создает излишнюю нагрузку. Работает медленно.

Если перечисленные недостатки для вас не являются существенной проблемой, использование этой библиотеки может быть хорошим вариантом, особенно, если вам нужно создавать HTML-таблицы и т. п.

• Работает и в Node, и в браузере — нет
• TypeScript — не поддерживается
• Пользовательские шрифты — веб-шрифты
• Простота использования — есть разные мнения на этот счет.

5. pdf-lib

pdf-lib — это библиотека для создания и редактирования PDF, реализованная полностью на Typescript. Как и pdfmake, она построена на основе PDFKit.

Хотя эта библиотека вышла позже остальных, она очень популярна и имеет тысячи звезд на GitHub. Работает она и с Node, и с браузерами. Ее API прекрасно спроектированы.

pdf-lib поддерживает склеивание, разрезание, встраивание PDF и имеет много функций, которых попросту нет в других библиотеках.

При всей своей мощи pdf-lib очень проста в использовании.

Одна из самых горячих фич этой библиотеки — поддержка Unit8Array и ArrayBuffer для встраивания файлов шрифтов, что позволяет использовать fs при работе с Node и xhr при работе с браузером. Попробовав эту библиотеку в деле, вы почувствуете, насколько она лучше других библиотек в плане производительности. С Webpack, конечно, ее тоже можно использовать.

pdf-lib исповедует императивный подход, так что, как вы уже можете догадаться, создавать с ее помощью сложные макеты будет нелегко.

• Работает в Node и браузере — да
• TypeScript — поддерживается
• Пользовательские шрифты — поддерживаются
• Простота использования — есть некоторые сложности, макет нужно высчитывать.

6. labelmake

Наконец, позвольте представить вам мою собственную библиотеку — враппер для pdf-lib. Я разработал ее, чтобы сделать pdf-lib как можно более декларативной.

В отличие от pdf-lib, labelmake не требует от разработчика просчитывать макет самостоятельно: вам нужно лишь определить постоянные отступы, высоту строк и т. п.

Пример кода можно посмотреть здесь.

labelmake сохраняет преимущества pdf-lib — возможность использовать Uint8Array и ArrayBuffer для данных шрифтов, а также возможность встраивать PDF-файлы. Но вместе с тем она позволяет разработчику эффективно создавать сложные макеты.

Вы также можете воспользоваться инструментарием Template Design & Code Generator, чтобы спроектировать макет PDF и генерировать выполняемый код!

Пользовательский рендеринг PDF в JavaScript с помощью Mozilla’s PDF.Js

Когда дело доходит до Интернета, почти каждый современный браузер поддерживает просмотр PDF-документов. Но этот нативный компонент находится вне контроля разработчика. Представьте, что из-за какого-то бизнес-правила в вашем веб-приложении вы хотели отключить кнопку « Print или отобразить только несколько страниц, в то время как другие требуют платного членства. Вы можете использовать встроенную в браузер функцию рендеринга PDF, используя тег embed , но, поскольку у вас нет программного доступа, вы не можете управлять фазой рендеринга в соответствии с вашими потребностями.

К счастью, теперь существует такой инструмент, PDF.js , созданный Mozilla Labs, который может отображать документы PDF в вашем браузере. Самое главное, вы, как разработчик, имеете полный контроль над отображением страниц документа PDF в соответствии с вашими требованиями. Разве это не круто? Да, это так!

Давайте посмотрим, что на самом деле PDF.js.

Что такое PDF.js

PDF.js – это Portable Document Format (PDF), созданный на основе технологий на основе HTML5, что означает, что его можно использовать в современных браузерах без установки сторонних плагинов.

PDF.js уже используется во многих местах, включая некоторые онлайн-сервисы для обмена файлами, такие как Dropbox , CloudUp и Jumpshare, чтобы позволить пользователям просматривать PDF-документы онлайн, не полагаясь на встроенную возможность рендеринга PDF в браузере.

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

В этой статье мы рассмотрим PDF.js и посмотрим, как мы можем интегрировать различные функции. Вот некоторые темы, которые мы рассмотрим:

• Базовая интеграция
• Рендеринг с использованием SVG
• Рендеринг текстовых слоев
• Увеличение / уменьшение

Базовая интеграция

Скачивание необходимых файлов

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

• pdf.js
• pdf.worker.js

Чтобы получить вышеупомянутые файлы, если вы являетесь пользователем Node.js, вы можете выполнить следующие действия, как указано в репозитории GitHub. После того, как вы закончите с gulp generic командой gulp generic , у вас будут эти необходимые файлы.

Если, как и я, вы не чувствуете себя комфортно с Node.js, есть более простой способ. Вы можете использовать следующие URL для загрузки необходимых файлов:

• https://mozilla.github.io/pdf.js/build/pdf.js
• https://mozilla.github.io/pdf.js/build/pdf.worker.js

Вышеупомянутые URL-адреса указывают на живую демонстрацию Mozilla PDF.js. Загружая файлы таким образом, вы всегда будете иметь последнюю версию библиотеки.

Веб-работники и PDF.js

Два загруженных вами файла содержат методы для извлечения, анализа и визуализации документа PDF. pdf . js – это основная библиотека, в которой есть методы для извлечения PDF-документа с какого-либо URL. Но анализ и рендеринг PDF не простая задача. Фактически, в зависимости от характера PDF, этапы анализа и рендеринга могут занять немного больше времени, что может привести к блокировке других функций JavaScript.

HTML5 представил веб-работников , которые используются для запуска кода в отдельном потоке от потока JavaScript в браузере. PDF.js в значительной степени полагается на веб-работников для обеспечения повышения производительности за счет удаления из основного потока операций, интенсивно работающих с процессором, таких как анализ и рендеринг. Выполнение обработки дорогостоящего кода в Web Workers по умолчанию в PDF.js, но при необходимости его можно отключить.

Обещания в PDF.js

JavaScript API в PDF.js довольно элегантен и прост в использовании и в значительной степени основан на Promises . Каждый вызов API возвращает Promise, что позволяет аккуратно обрабатывать асинхронные операции.

Привет, мир!

Давайте интегрируем простой «Hello World!» PDF документ. Документ, который мы используем в этом примере, можно найти по адресу http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf .

Создайте проект под локальным веб-сервером, чтобы к нему можно было получить доступ с помощью http: //localhost/pdfjs_learning/index.html . PDF.js делает Ajax-вызовы для извлечения документов кусками, поэтому для того, чтобы Ajax-вызов работал локально, нам нужно разместить файлы PDF.js на локальном веб-сервере. После создания папки pdfjs_learning на локальном веб-сервере поместите в pdf . js файлы ( pdf . js , pdf . worker . js ), которые вы скачали выше. Поместите следующий код в index . html :

Как видите, мы включили ссылку на основной файл библиотеки, pdf . js PDF.js автоматически определяет, поддерживает ли ваш браузер Web Workers, и если он это делает, он попытается загрузить pdf . worker . js из того же места, что и pdf . js Если файл находится в другом месте, вы можете настроить его, используя свойство PDFJS . workerSrc сразу после включения основной библиотеки:

Если ваш браузер не поддерживает Web Workers, вам не о чем беспокоиться, так как pdf . js содержит весь код, необходимый для анализа и рендеринга PDF-документов без использования Web Workers, но в зависимости от ваших PDF-документов это может привести к остановке основного потока выполнения JavaScript.

Давайте напишем некоторый код для отображения «Hello World!» PDF документ. Поместите следующий код в тег script тегом pdf . js

Теперь создайте элемент < canvas > с идентификатором the — canvas в body тега.

После создания элемента < canvas > обновите браузер и, если вы разместили все на своем месте, вы должны увидеть Hello, world! напечатано в вашем браузере. Но это не обычный Привет, мир! , Привет, мир! Вы видите, что в основном весь документ PDF отображается в вашем браузере с использованием кода JavaScript. Охватите удивительность!

Давайте обсудим различные части вышеупомянутого кода, которые сделали возможным рендеринг документа PDF.

PDFJS – это глобальный объект, который вы получаете, когда включаете файл pdf . js в браузер. Этот объект является базовым объектом и содержит различные методы.

PDFJS . getDocument ( ) является главной точкой входа, и все остальные операции выполняются в ней. Он используется для асинхронной загрузки PDF-документа, посылая несколько Ajax-запросов для загрузки документа порциями, что не только быстро, но и эффективно. Существуют различные параметры, которые можно передать этому методу, но наиболее важным является URL-адрес, указывающий на документ PDF.

PDFJS . getDocument ( ) возвращает Обещание, которое можно использовать для размещения кода, который будет выполнен, когда PDF.js завершит извлечение документа. Обратному вызову об успешном выполнении Promise передается объект, который содержит информацию о загруженном документе PDF. В нашем примере этот аргумент называется pdf .

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

pdf . getPage ( ) используется для получения отдельных страниц в документе PDF. Когда вы предоставляете действительный номер страницы, getPage ( ) возвращает обещание, которое после разрешения дает нам объект page который представляет запрошенную страницу. У объекта pdf также есть свойство numPages , которое можно использовать для получения общего количества страниц в документе PDF.

scale – это уровень масштабирования, который мы хотим отображать на страницах документа PDF.

page . getViewport ( ) возвращает размеры страницы документа PDF для предоставленного уровня масштабирования.

page . render ( ) требует, чтобы объект с различными парами ключ / значение отображал страницу PDF на холсте. В нашем примере мы передали 2 d контекст элемента Canvas и объект viewport которые мы получаем из метода page . getViewport .

Рендеринг с использованием SVG

PDF.js поддерживает два режима рендеринга. По умолчанию это популярный режим рендеринга на основе Canvas. Но это также позволяет вам отображать PDF документы с использованием SVG. Давайте представим Hello World! PDF документ из предыдущего примера в SVG.

Обновите успешный обратный вызов pdf . getPage ( ) следующим кодом, чтобы увидеть SVG-рендеринг PDF.js в действии.

Замените элемент < canvas > в теге body на < div > < / div > и обновите браузер.

Если вы правильно разместили код, вы увидите Hello, world! рендеринг, но на этот раз он использует SVG вместо Canvas. Идите дальше и проверьте HTML-код страницы, и вы увидите, что весь рендеринг выполнен с использованием стандартных компонентов SVG.

Как видите, PDF.js не ограничивает вас одним механизмом рендеринга. Вы можете использовать Canvas или SVG-рендеринг в зависимости от ваших требований. В оставшейся части статьи мы будем использовать рендеринг на основе Canvas.

Рендеринг текстовых слоев

PDF.js дает вам возможность визуализировать текстовые слои поверх страниц PDF, которые были отрисованы с использованием Canvas. Для этого нам нужно получить дополнительный файл JavaScript из репозитория PDF.js GitHub. Загрузите плагин text_layer_builder.js . Нам также нужно получить соответствующий CSS-файл text_layer_builder.css . Загрузите оба файла и поместите их в папку pdfjs_learning на локальном сервере.

Прежде чем мы перейдем к фактическому рендерингу текстового слоя, давайте получим PDF-документ с большим содержанием, чем «Hello World!» пример. Документ, который мы собираемся сделать, снова взят из живой демонстрации Mozilla, здесь .

Поскольку этот документ содержит несколько страниц, нам нужно немного изменить наш код. Сначала удалите < div > мы создали в последнем примере, и замените его следующим:

Этот контейнер будет использоваться для хранения нескольких страниц документа PDF. Структура размещения страниц, отображаемых как элементы Canvas довольно проста. В div#container каждая страница PDF будет иметь свой собственный < div > . Атрибут id для < div > будет иметь формат page — # . Например, первая страница в документе PDF будет иметь атрибут < div > с атрибутом id установленным как page — 1 а 12-ая страница будет иметь page — 12 . Внутри каждой из этих page — # , будет элемент Canvas .

Давайте заменим обратный вызов getDocument ( ) на следующий код. Не забудьте обновить переменную url с помощью http : / / mozilla . github . io / pdf . js / web / compressed . tracemonkey — pldi — 09. pdf (или другого другого PDF-документа по вашему выбору).

Обновите ваш браузер и подождите несколько секунд (пока новый PDF-документ извлекается в фоновом режиме), и как только документ завершит загрузку, вы должны увидеть прекрасно отрендеренные страницы PDF в вашем браузере. Теперь мы увидели, как визуализировать несколько страниц, давайте обсудим, как визуализировать текстовые слои.

Добавьте следующие две строки в index . html чтобы включить файлы, необходимые для рендеринга текстового слоя:

PDF.js отображает текстовый слой над холстами в нескольких элементах < div > , поэтому лучше обернуть все эти элементы < div > в элемент контейнера. Замените page . render ( renderContext ) следующим кодом, чтобы увидеть текстовые слои в действии:

Обновите ваш браузер, и на этот раз вы увидите не только рендеринг PDF-страниц, но и выбор и копирование текста с них. PDF.js это круто!

Давайте обсудим некоторые важные части приведенного выше фрагмента кода.

page . render ( ) , как и любой другой метод в PDF.js, возвращает обещание, которое разрешается, когда страница PDF успешно отображается на экране. Мы можем использовать обратный вызов успеха для визуализации текстовых слоев.

page . getTextContent ( ) – это метод, который возвращает фрагменты текста для этой конкретной страницы. Это также возвращает обещание, и в случае успеха возвращается обратный вызов этого представления фрагментов текста обещания.

TextLayerBuilder – это класс, который требует некоторые параметры, которые у нас уже есть в pdf . getPage ( ) для каждой страницы. Параметр textLayerDiv представляет textLayerDiv < div > который будет использоваться в качестве контейнера для размещения нескольких textLayerDiv < div > каждый из которых представляет определенный фрагмент текста.

Вновь созданный экземпляр TextLayerBuilder имеет два важных метода: setTextContent ( ) , который используется для установки фрагментов текста, возвращаемых page . getTextContent ( ) , и render ( ) , который используется для визуализации текстового слоя.

Как вы можете видеть, мы назначаем CSS-класс textLayer для textLayerDiv . У этого класса есть стили, которые гарантируют, что фрагменты текста хорошо вписываются в элементы Canvas, так что пользователь может выбирать / копировать текст естественным образом.

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

Veronica Marini

In the first part of this tutorial, we’ll show how to build a simple free JavaScript PDF editor using pdf-lib . In the second part, we’ll walk through how you can deploy PDF editing in PSPDFKit’s JavaScript PDF Viewer.

Choosing the Right JavaScript PDF Editor

If you’re looking for an open source PDF-processing library, pdf-lib is a great option. According to its GitHub page, pdf-lib ’s main features are that it:

Supports modification (editing) of existing documents.

Works in all JavaScript environments.

If you’re looking for a commercial JavaScript PDF editor, our Web SDK offers some additional benefits:

A customizable out-of-the-box UI to deploy faster and save developer resources.

The ability to persist your PDF edits and changes across devices with a syncing framework like PSPDFKit Instant.

More features — like annotating and collaborating on PDFs, redaction, and digital signatures.

Access to dedicated customer support to help speed up deployment.

So now, let’s move on to building a simple PDF editor that adds and removes pages and draws text on a document.

Building a PDF Editor with pdf-lib

This section will cover how you can use pdf-lib to create and integrate a PDF editor into your project.

Initial Setup

Before diving into the editor implementation, we’ll lay out a simple HTML skeleton to initialize our project:

As you can see, we’re using the hosted version from unpkg, but you could also download the pdf-lib library via a package manager like npm or Yarn.

Loading and Rendering the Document

With pdf-lib , you can either create a new document or modify an existing one. For our example, we’ll load an existing document from our project folder. Please note that the PDF needs to be embedded in an iframe tag.

Here’s how we load our document:

And here’s how we render it:

Adding and Removing Pages

To add or remove the pages, we create two buttons:

Every time they’re clicked, they each call one of these two functions:

Our buttons add and remove pages at the end of the document, but if, for example, you’d like to add a page at a specific page index, you can use the .insertPage(index, page?) method instead of addPage() .

Drawing Text

Now let’s say we’d like to draw some text on the added pages. pdf-lib exposes a drawText() API, so we can achieve this by adding few lines of code to our addPageToDoc function:

This is how our code will look in the end:

Integrating PSPDFKit’s JavaScript PDF Editor

This next section will cover how to integrate PSPDFKit’s JavaScript PDF editor into your project.

Adding PSPDFKit to Your Project

First, you need to have:

A package manager compatible with npm, e.g. Yarn. We’ll use yarn for the examples in this tutorial.

PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module by running:

Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Integrating into Your Project

Add the PDF document you want to display to your project’s directory. For a quick test, you can use our the License.pdf document, which you’ll find in the PSPDFKit for Web directory.

Now, let’s lay out another simple HTML skeleton to initialize our project:

Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load() :

Import index.js into your HTML page:

Here’s how the final HTML file will look:

The last thing left to do is serve your website.

We’ll use the npm serve package as a simple HTTP server.

Install the serve package:

Serve the contents of the current directory:

Open http://localhost:8080 in your browser to view the website.

And that’s it! All the features we built using pdf-lib are already present out of the box in our SDK, so we don’t need to do anything else.

Conclusion

pdf-lib is a good free JavaScript PDF editor option for modifying a PDF document, and it’s a great choice in many cases. However, implementing a feature-rich editor isn’t a trivial task. And sometimes businesses require more complex features, such as:

An annotation syncing framework to persist changes to a PDF across devices.

The ability to add and read digital signatures with specialized APIs.

An easy-to-integrate UI that allows you to customize every aspect of the viewer.

At PSPDFKit, we offer a commercial, feature-rich, and completely customizable JavaScript PDF library that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Check out our demo to see it in action.

Generating PDF files with JavaScript

I’m trying to convert XML data into PDF files from a web page and I was hoping I could do this entirely within JavaScript. I need to be able to draw text, images and simple shapes. I would love to be able to do this entirely in the browser.

7 Answers 7

I’ve just written a library called jsPDF which generates PDFs using Javascript alone. It’s still very young, and I’ll be adding features and bug fixes soon. Also got a few ideas for workarounds in browsers that do not support Data URIs. It’s licensed under a liberal MIT license.

I came across this question before I started writing it and thought I’d come back and let you know 🙂

Example create a «Hello World» PDF file.

Another javascript library worth mentioning is pdfmake.

The browser support does not appear to be as strong as jsPDF, nor does there seem to be an option for shapes, but the options for formatting text are more advanced then the options currently available in jsPDF.

I maintain PDFKit, which also powers pdfmake (already mentioned here). It works in both Node and the browser, and supports a bunch of stuff that other libraries do not: