PDF Viewer Component для Angular 5+
https://vadimdez.github.io/ng2-pdf-viewer/
https://stackblitz.com/edit/ng2-pdf-viewer
https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76
npm install ng2-pdf-viewer
Частичный плющ скомпилированных библиотечных пучков.
npm install ng2-pdf-viewer@^7.0.0
npm install ng2-pdf-viewer@~3.0.8
Если вы используете systemjs
см. Конфигурацию здесь.
Добавьте PdfViewerModule
в imports
вашего модуля
import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { AppComponent } from './app/app.component' ;
import { PdfViewerModule } from 'ng2-pdf-viewer' ;
@ NgModule ( {
imports : [ BrowserModule , PdfViewerModule ] ,
declarations : [ AppComponent ] ,
bootstrap : [ AppComponent ]
} )
class AppModule { }
platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ;
А затем используйте его в своем компоненте
import { Component } from '@angular/core' ;
@ Component ( {
selector : 'example-app' ,
template : `
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
[original-size]="false"
style="width: 400px; height: 500px"
></pdf-viewer>
`
} )
export class AppComponent {
pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf" ;
}
Свойство | Тип | Необходимый |
---|---|---|
[SRC] | Строка, объект, uint8array | Необходимый |
Пропустите местоположение PDF
[src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"
Для большего контроля вы можете передать объект параметров в [src]
. Смотрите другие атрибуты для объекта здесь.
Объект параметров для загрузки защищенного PDF будет:
{
url : 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' ,
withCredentials : true
}
Свойство | Тип | Необходимый |
---|---|---|
[страница] или [(страница)]] | число | Требуется с [Show-all] = "false" или необязательно с [Show-all] = "true" |
Номер страницы
[page]="1"
поддерживает двустороннее привязку данных
[(page)]="pageVariable"
Если вы хотите, чтобы two way data binding
фактически обновляет переменную page
при изменении/прокрутке страницы - вы должны быть уверены, что вы определяете высоту контейнера, например:
pdf-viewer {
height : 100 vh ;
}
Свойство | Тип | Необходимый |
---|---|---|
[Stick-to-Page] | логический | Необязательный |
Вид на страницу. Работает в сочетании с [show-all]="true"
и page
.
[stick-to-page]="true"
Свойство | Тип | Необходимый |
---|---|---|
[рендер-текст] | логический | Необязательный |
Включить текстовый рендеринг, позволяет выбрать текст
[render-text]="true"
Свойство | Тип | Необходимый |
---|---|---|
[Render-Text-Mode] | Rendertextmode | Необязательный |
Используется в сочетании с [render-text]="true"
Управляют, если включен текстовый слой, и используется режим выбора.
0 = RenderTextMode.DISABLED
- Отключить слой выбора текста
1 = RenderTextMode.ENABLED
- включает слой выбора текста
2 = RenderTextMode.ENHANCED
.
[render-text-mode]="1"
Свойство | Тип | Необходимый |
---|---|---|
[Внешняя лицевая сторона] | нить | Необязательный |
Используется в сочетании с [render-text]="true"
Ссылка цели
blank
none
self
parent
top
[external-link-target]="'blank'"
Свойство | Тип | Необходимый |
---|---|---|
[Ротация] | число | Необязательный |
Поверните PDF
Допустимый шаг - 90 градусов, прежняя. 0, 90, 180
[rotation]="90"
Свойство | Тип | Необходимый |
---|---|---|
[Zoom] | число | Необязательный |
Zoom PDF
[zoom]="0.5"
Свойство | Тип | Необходимый |
---|---|---|
[масштаб Zoom] | 'weadth-weadth' | '' страница '|' | Необязательный |
Определяет, как шкала масштабирования вычисляется, когда [original-size]="false"
, по умолчанию установлен на «ширина страницы».
«ширина страницы» со масштабированием 1 будет отображать ширину страницы, которая занимает все возможное горизонтальное пространство в контейнере
'Страница-высота' с увеличением 1 будет отображать высоту страницы, которая занимает все возможное вертикальное пространство в контейнере
«Страница» с увеличением 1 будет отображать страницу, которая будет масштабирована по ширине или высоте, чтобы полностью поместиться в контейнере
[zoom-scale]="'page-width'"
Свойство | Тип | Необходимый |
---|---|---|
[Оригинальный размер] | логический | Необязательный |
[original-size]="true"
Свойство | Тип | Необходимый |
---|---|---|
[Fit-to-Page] | логический | Необязательный |
Работает в сочетании с [original-size]="true"
. Вы можете показать свой документ в оригинальном размере и убедиться, что он не больше, чем блок контейнера.
[fit-to-page]="false"
Свойство | Тип | Необходимый |
---|---|---|
[Show-All] | логический | Необязательный |
Показать сингл или все страницы вообще
[show-all]="true"
Свойство | Тип | Необходимый |
---|---|---|
[Autoresize] | логический | Необязательный |
Включите или выключите Auto Resize.
! Важно сделать [autoresize]
работать-убедитесь, что [original-size]="false"
и pdf-viewer
тег имеет max-width
или display
.
[autoresize]="true"
Свойство | Тип | Необходимый |
---|---|---|
[c-maps-url] | нить | Необязательный |
URL для нелатиновых символов.
[c-maps-url]="'assets/cmaps/'"
URL-адрес по умолчанию: https://unpkg.com/[email protected]/cmaps/
Чтобы подавать CMAP самостоятельно, вам нужно скопировать node_modules/pdfjs-dist/cmaps
для assets/cmaps
.
Свойство | Тип | Необходимый |
---|---|---|
[Show Borders] | логический | Необязательный |
Показать границы страницы
[show-borders]="true"
Свойство | Тип | Необходимый |
---|---|---|
(Заполненная нагрузка) | перезвонить | Необязательный |
Получить информацию PDF с обратным вызовом
Сначала определите функцию обратного вызова "Callbackfn" в вашем контроллере,
callBackFn ( pdf : PDFDocumentProxy ) {
// do anything with "pdf"
}
А затем используйте его в своем шаблоне:
(after-load-complete)="callBackFn($event)"
Свойство | Тип | Необходимый |
---|---|---|
(Page-Rendered) | перезвонить | Необязательный |
Получите событие, когда страница отображается. Призывал на каждую визуализированную страницу.
Определите обратный вызов в своем компоненте:
pageRendered ( e : CustomEvent ) {
console . log ( '(page-rendered)' , e ) ;
}
А затем связывайте его с <pdf-viewer>
:
(page-rendered)="pageRendered($event)"
Свойство | Тип | Необходимый |
---|---|---|
(страницы, инициализированные) | перезвонить | Необязательный |
Получите событие, когда страницы инициализированы.
Определите обратный вызов в своем компоненте:
pageInitialized ( e : CustomEvent ) {
console . log ( '(pages-initialized)' , e ) ;
}
А затем связывайте его с <pdf-viewer>
:
(pages-initialized)="pageInitialized($event)"
Свойство | Тип | Необходимый |
---|---|---|
(Тексто-слой-redender) | перезвонить | Необязательный |
Получите событие, когда текстовый слой отображается.
Определите обратный вызов в своем компоненте:
textLayerRendered ( e : CustomEvent ) {
console . log ( '(text-layer-rendered)' , e ) ;
}
А затем связывайте его с <pdf-viewer>
:
(text-layer-rendered)="textLayerRendered($event)"
Свойство | Тип | Необходимый |
---|---|---|
(ошибка) | перезвонить | Необязательный |
Обращение с обращением ошибок
Определите обратный вызов в классе вашего компонента
onError ( error : any ) {
// do anything
}
Затем добавьте его в pdf-component
в шаблоне компонента
(error)="onError($event)"
Свойство | Тип | Необходимый |
---|---|---|
(в процессе) | перезвонить | Необязательный |
Загрузка обратного вызова прогресса - предоставляет total
информацию о прогрессе и loaded
байты. Называется несколько раз на фазе загрузки PDF.
Определите обратный вызов в классе вашего компонента
onProgress ( progressData : PDFProgressData ) {
// do anything with progress data. For example progress indicator
}
Затем добавьте его в pdf-component
в шаблоне компонента
(on-progress)="onProgress($event)"
В вашем шаблоне html
добавьте input
:
< input (change) =" onFileSelected() " type =" file " id =" file " >
а затем добавьте в свой компонент метод, onFileSelected
:
onFileSelected ( ) {
let $img : any = document . querySelector ( '#file' ) ;
if ( typeof ( FileReader ) !== 'undefined' ) {
let reader = new FileReader ( ) ;
reader . onload = ( e : any ) => {
this . pdfSrc = e . target . result ;
} ;
reader . readAsArrayBuffer ( $img . files [ 0 ] ) ;
}
}
По умолчанию worker
загружается из cdn.jsdelivr.net
.
В вашем path
обновления кода к работнику, например, /pdf.worker.mjs
( window as any ) . pdfWorkerSrc = '/pdf.worker.mjs' ;
Это должно быть установлено до того, как будет отображаться компонент pdf-viewer
.
Если у вас когда -либо есть (супер редкий) краевой случай, в котором вы запускаете в среде, что несколько компонентов каким -то образом загружаются на одной и той же веб -странице, разделяя одно и то же окно, но используя разные версии PDF.Worker, была добавлена поддержка. Вы можете сделать вышеперечисленное, за исключением того, что вы можете добавить конкретную версию PDFJS, требуемую и переопределить пользовательский путь только для этой версии . Таким образом, установление глобального окна VAR не конфликтует.
( window as any ) [ "pdfWorkerSrc2.14.305" ] = '/pdf.worker.mjs' ;
Используйте eventBus
для функциональности поиска.
В файле TS вашего компонента:
pdf-viewer
,search()
как это: @ ViewChild ( PdfViewerComponent ) private pdfComponent: PdfViewerComponent ;
search ( stringToSearch : string ) {
this . pdfComponent . eventBus . dispatch ( 'find' , {
query : stringToSearch , type : 'again' , caseSensitive : false , findPrevious : undefined , highlightAll : true , phraseSearch : true
} ) ;
}
См. Appling.md
Если этот проект поможет вам сократить время для развития, вы можете дать мне чашку чая :)
MIT © VADYM YATSYUK