Как загружать и просматривать файлы PDF в приложении Angular

Как загружать и просматривать файлы PDF в приложении Angular

В этом блоге показано, как отобразить файл PDF в приложении Angular с помощью элемента управления Syncfusion Angular PDF Viewer.

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

Примечание.Для этого элемента управления PDF Viewer требуется внутренняя веб-служба API на стороне сервера для отображения содержимого PDF.

Ключевая особенность

Ключевые особенности Angular PDF Viewer:

• Панель инструментов: встроенная панель инструментов для лучшего взаимодействия с пользователем.
• Увеличение: выполнение операций масштабирования для лучшего просмотра.
• Навигация. Удобная навигация по страницам PDF с помощью аннотаций ссылок, просмотра эскизов и просмотра закладок.
• Выделение текста: выберите и скопируйте текст из файла PDF.
• Поиск текста. Удобный поиск текста в документе PDF.
• Печать: печать всего документа, отдельной страницы или набора страниц прямо из браузера.
• Загрузить: загрузить загруженный или отредактированный (заполненный и аннотированный) PDF-файл.
• Аннотации. Аннотации можно добавлять или редактировать в документе PDF. Поддерживаемые аннотации: выделение, подчеркивание, зачеркивание, линия, стрелка, прямоугольник, круг, многоугольник, расстояние, периметр, площадь, радиус, объем, произвольный текст, рукописная подпись, чернила, штамп, изображение и стикеры.
• Импорт и экспорт аннотаций. Аннотации можно импортировать и экспортировать в формате XFDF и JSON.
• Поля AcroForm. Заполнение и редактирование полей формы в документе PDF. Поддерживаемые поля формы: текстовое поле, поле со списком, переключатель и флажок.
• Импорт и экспорт полей AcroForm. Данные полей формы можно импортировать и экспортировать в формате JSON.

Давайте углубимся в шаги по настройке компонента PDF Viewer в приложении Angular.

Предпосылки

Чтобы настроить базовый образец Angular, необходимы следующие элементы:

• Node.js
• Angular 4 или более поздняя версия
• Код Visual Studio
• Докер

1. Если вы используете Windows, установите Docker for Windows.
2. Если вы используете macOS, установите Docker for Mac.

Настройка серверной службы PDF Viewer

Компонент PDF Viewer использует серверную часть (веб-службу) для отображения страниц и извлечения содержимого PDF. Мы предоставили серверную часть (веб-службу) в виде образа Docker, чтобы вы могли быстро приступить к работе с нашим компонентом PDF Viewer.

Шаг 1. Загрузите образ pdfviewer-server из Docker Hub.

docker pull syncfusion/pdfviewer-server

Примечание. Средство просмотра PDF — это коммерческий продукт, и для его использования в производственной среде требуется действующая лицензия (запросить лицензию или пробный ключ).

Шаг 2. Создайте файл docker-compose.yml со следующим кодом в своей файловой системе.

version: '3.4'
services:
pdfviewer-server:
image: syncfusion/pdfviewer-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
volumes:
-  C:\Docker\Data:/app/Data
ports:
- "6001:80"

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

Шаг 3. На вкладке терминала перейдите в каталог, в который вы поместили файл docker-compose.yml, и выполните следующую команду.

docker-compose up

Шаг 4. Запустите контейнер Docker вместе с лицензионным ключом с помощью этой команды запуска docker.

docker run -d -p 6001:80 -e SYNCFUSION_LICENSE_KEY=YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest

Например: docker run -d -p 6001:80 -e SYNCFUSION_LICENSE_KEY=Mzg1ODMzQDMxMzgyZTM0MmUzMGdFRGJvUno1MUx4Tit4S09CeS9xRHZzZU4ySVBjQVFuT0VpdWpHUWJ6aXM9 syncfusion/pdfviewer-server:latest

Теперь экземпляр Docker сервера PDF Viewer запускается на локальном хосте с предоставленным номером порта http://localhost:6001. Откройте эту ссылку в браузере и перейдите к элементу управления веб-API средства просмотра PDF http://localhost:6001/api/pdfviewer. Он возвращает ответ метода get по умолчанию.

Примечание. Этот предопределенный образ Docker (pdfviewer-server) содержит веб-API, обязательные для элемента управления PDF Viewer, такие как открытие, выделение текста, текстовый поиск и сохранение PDF-документов. Если вы хотите добавить новую функциональность или настроить существующую функциональность, вы можете создать свой собственный образ Docker из существующего проекта Docker из этого проекта PDF Viewer server.

Интегрируйте элемент управления Syncfusion Angular PDF Viewer в проект Angular.

1. Создать Angular-проект.
2. Установите NuGet-пакет EJ2 Angular PDF Viewer от Syncfusion, используя следующую команду. Команда — save указывает NPM добавить пакет средства просмотра PDF в раздел зависимостей файла package.json.

npm install @syncfusion/ej2-angular-pdfviewer –save

3. Импортируйте модуль PDF Viewer в приложение Angular (app.module.ts) из пакета @syncfusion/ej2-angular-pdfviewer[src/app/app.module.ts]. См. следующий пример кода.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

//Imported syncfusion PdfViewer component from PdfViewer package

import {

PdfViewerModule

} from '@syncfusion/ej2-angular-pdfviewer';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,PdfViewerModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

4. Следующие файлы CSS будут доступны в папке ../node_modules/@syncfusionpackage. Добавьте ссылки на эти файлы в [src/styles.css], используя следующий код.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';

@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';

5. Измените шаблон в файле [src/app/app.component.ts] для отображения компонента PDF Viewer. Добавьте Angular PDF Viewer с помощью селектора ‹ejs-pdfviewer› в разделе шаблона файла app.component.ts.

import { Component, OnInit } from '@angular/core';
import {
LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
template: `<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
//tslint:disable-next-line:max-line-length
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
title = 'syncfusion-pdfviewer-angular-app';
// set the service URL to PdfViewerControl
public service = 'http://localhost:6001/api/pdfviewer';
//Default document to render in the PdfViewerControl
public document: string = “" ;
}

6. Теперь запустите приложение, используя следующую команду.

Ng serve –open

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

Загрузите или откройте шаблон PDF по умолчанию

Вы можете загрузить существующий PDF-документ при инициализации элемента управления PDF Viewer, установив documentPath компонента Angular PDF Viewer в app.component.html.

Примечание. Вы должны поместить файлы PDF в папку данных, используемую в разделе томов (т. е. C:\Docker\Data) файла docker-compose.yml.

import { Component, OnInit } from '@angular/core';
import {
LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
template: `<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
//tslint:disable-next-line:max-line-length
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
title = 'syncfusion-pdfviewer-angular-app';
// set the service URL to PdfViewerControl
public service = 'http://localhost:6001/api/pdfviewer';
//Default document to render in the PdfViewerControl
public document: string = "Angular Succinctly.pdf" ;
}

Загрузить или открыть файл PDF с URL-адреса

Вы можете загрузить PDF-документ из URL-адреса в компоненте Angular PDF Viewer в app.component.html.

import { Component, OnInit } from '@angular/core';
import {
LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
template: `<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
//tslint:disable-next-line:max-line-length
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
title = 'syncfusion-pdfviewer-angular-app';
// set the service URL to PdfViewerControl
public service = 'http://localhost:6001/api/pdfviewer';
//Default document to render in the PdfViewerControl
public document: string = "https://www.syncfusion.com/downloads/support/directtrac/general/pd/JavaScript_Succinctly-1664489739";
}

Ресурсы

Для получения дополнительной информации см. Загрузка и просмотр PDF-документов в проекте приложений Angular.

Вывод

Спасибо, что читаете этот блог! Я надеюсь, что теперь у вас есть четкое представление о настройке серверного API PDF Viewer с использованием предопределенных изображений Docker и интеграции компонента PDF Viewer в приложение Angular. Мы также подробно рассмотрели, как загружать PDF-документ во время инициализации приложения и по URL-адресу.

Наш элемент управления PDF Viewer также доступен на платформах Blazor, Flutter, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, JavaScript, React, Vue , Xamarin.Forms, UWP, WinForms, WPF.

Для существующих клиентов новая версия Essential Studio доступна для загрузки на странице Лицензии и загрузки. Если вы еще не являетесь клиентом Syncfusion, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы проверить наши доступные функции.

Вы также можете связаться с нами через наш форум поддержки, Direct-Trac или портал обратной связи. Мы здесь, чтобы помочь вам добиться успеха!

Связанные блоги

• 5 лучших практик для безопасности приложений Angular
• Настройка пользовательского интерфейса Angular Query Builder
• Интеграция сторонних библиотек в Angular Rich Text Editor
• Загрузить миллион+ записей менее чем за секунду в Syncfusion Angular Data Grid

Первоначально опубликовано на https://www.syncfusion.com 1 июня 2021 г.