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

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

 PDFJS.getDocument(url) .then(function(pdf) { // Get div#container and cache it for later use var container = document.getElementById("container"); // Loop from 1 to total_number_of_pages in PDF document for (var i = 1; i <= pdf.numPages; i++) { // Get desired page pdf.getPage(i).then(function(page) { var scale = 1.5; var viewport = page.getViewport(scale); var div = document.createElement("div"); // Set id attribute with page-#{pdf_page_number} format div.setAttribute("id", "page-" + (page.pageIndex + 1)); // This will keep positions of child elements as per our needs div.setAttribute("style", "position: relative"); // Append div within div#container container.appendChild(div); // Create a new Canvas element var canvas = document.createElement("canvas"); // Append Canvas within div#page-#{pdf_page_number} div.appendChild(canvas); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; // Render PDF page page.render(renderContext); }); } }); 

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

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

 <link type="text/css" href="text_layer_builder.css" rel="stylesheet"> 

 <script type="text/javascript" src="text_layer_builder.js"></script> 

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

 page.render(renderContext) .then(function() { // Get text-fragments return page.getTextContent(); }) .then(function(textContent) { // Create div which will hold text-fragments var textLayerDiv = document.createElement("div"); // Set it's class to textLayer which have required CSS styles textLayerDiv.setAttribute("class", "textLayer"); // Append newly created div in `div#page-#{pdf_page_number}` div.appendChild(textLayerDiv); // Create new instance of TextLayerBuilder class var textLayer = new TextLayerBuilder({ textLayerDiv: textLayerDiv, pageIndex: page.pageIndex, viewport: viewport }); // Set text-fragments textLayer.setTextContent(textContent); // Render text-fragments textLayer.render(); }); 

Обновите ваш браузер, и на этот раз вы увидите не только рендеринг 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 вы также можете управлять масштабированием документа PDF. На самом деле, масштабирование довольно простое, и нам просто нужно обновить значение scale . Увеличьте или уменьшите scale с вашим желаемым коэффициентом, чтобы изменить уровень масштабирования. Это оставлено в качестве упражнения для читателя, но попробуйте это и дайте нам знать, как вы продвигаетесь в комментариях.

Вывод

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