ng2 pdf viewer

Visualizador de PDF angular

Componente Visualizador em PDF para Angular 5+

Página de demonstração

https://vadimdez.github.io/ng2-pdf-viewer/

Exemplo de Stackblitz

https://stackblitz.com/edit/ng2-pdf-Viewer

Postagem do blog

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

Visão geral

• Instalar
• Uso
• Opções
• Renderizar o arquivo PDF local
• Defina um caminho personalizado para o trabalhador
• Pesquise no PDF
• Contribuir

Instalar

Angular> = 12

 npm install ng2-pdf-viewer

Pacotes parciais de bibliotecas compiladas com hera.

Angular> = 4

 npm install ng2-pdf-viewer@^7.0.0

Angular <4

 npm install ng2-pdf-viewer@~3.0.8

Uso

Caso você esteja usando systemjs consulte Configuração aqui.

Adicione PdfViewerModule às imports do seu módulo

 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 ) ;

E então use -o em seu componente

 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" ;
} 

Opções

• [SRC]
• [(página)]
• [Beck-to Page]
• [Target externo de ligação]
• [Texto renderizado]
• [Modo de renderização-texto]
• [rotação]
• [Zoom]
• [escala de zoom]
• [tamanho original]
• [FIX-TO PAGE]
• [show-tudo]
• [Autoresize]
• [C-maps-url]
• [F-Borders]
• (pós-carga-completa)
• (Página renderizada)
• (Caminhada de texto)
• (erro)
• (no progresso)

[SRC]

Propriedade	Tipo	Obrigatório
[SRC]	string, objeto, uint8Array	Obrigatório

Passe a localização em PDF

 [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"

Para mais controle, você pode passar as opções para [src] . Veja outros atributos para o objeto aqui.

Opções objeto para carregar PDF protegido seria:

 {
 url : 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' ,
 withCredentials : true
} 

[página]

Propriedade	Tipo	Obrigatório
[página] ou [(página)]	número	Necessário com [show-all] = "false" ou opcional com [show-all] = "true"

Número da página

 [page]="1"

suporta a ligação de dados bidirecionais também

 [(page)]="pageVariable"

Se você deseja que a two way data binding atualize sua variável page na página Alterar/rolar - você deve ter certeza de que define a altura do contêiner, por exemplo:

 pdf-viewer {
    height : 100 vh ;
}

[Beck-to Page]

Propriedade	Tipo	Obrigatório
[Beck-to Page]	booleano	Opcional

Visualiza na página. Funciona em combinação com [show-all]="true" e page .

 [stick-to-page]="true"

[Texto renderizado]

Propriedade	Tipo	Obrigatório
[Texto renderizado]	booleano	Opcional

Ativar renderização de texto, permite selecionar texto

 [render-text]="true"

[Modo de renderização-texto]

Propriedade	Tipo	Obrigatório
[Modo de renderização-texto]	RenderTextMode	Opcional

Usado em combinação com [render-text]="true"

Controla se a camada de texto estiver ativada e o modo de seleção usado.

0 = RenderTextMode.DISABLED - Desative a camada de seleção de texto

1 = RenderTextMode.ENABLED - Ativa a camada de seleção de texto

2 = RenderTextMode.ENHANCED - Ativa a seleção aprimorada de texto

 [render-text-mode]="1"

[Target externo de ligação]

Propriedade	Tipo	Obrigatório
[Target externo de ligação]	corda	Opcional

Usado em combinação com [render-text]="true"

Link Target

• blank
• none
• self
• parent
• top

 [external-link-target]="'blank'"

[rotação]

Propriedade	Tipo	Obrigatório
[rotação]	número	Opcional

Gire o PDF

A etapa permitida é de 90 graus, Ex. 0, 90, 180

 [rotation]="90"

[Zoom]

Propriedade	Tipo	Obrigatório
[Zoom]	número	Opcional

Zoom pdf

 [zoom]="0.5"

[escala de zoom]

Propriedade	Tipo	Obrigatório
[escala de zoom]	'Página largura' | 'Página de página' | 'Página	Opcional

Define como a escala de zoom é calculada quando [original-size]="false" , por padrão definido como 'largura da página'.

• 'largura da página' com zoom de 1 exibirá uma largura de página que ocupa todo o espaço horizontal possível no contêiner

• 'Página-altura' com zoom de 1 exibirá uma altura de página que ocupa todo o espaço vertical possível no contêiner

• 'Page-Fit' com zoom de 1 exibirá uma página que será dimensionada para largura ou altura para caber completamente no contêiner

 [zoom-scale]="'page-width'"

[tamanho original]

Propriedade	Tipo	Obrigatório
[tamanho original]	booleano	Opcional

• Se definido como true - o tamanho será o mesmo que o documento original
• Se definido como false - o tamanho será o mesmo que o bloco de contêineres

 [original-size]="true"

[FIX-TO PAGE]

Propriedade	Tipo	Obrigatório
[FIX-TO PAGE]	booleano	Opcional

Funciona em combinação com [original-size]="true" . Você pode mostrar seu documento no tamanho original e garantir que ele não seja maior do que o bloco de contêineres.

 [fit-to-page]="false"

[show-tudo]

Propriedade	Tipo	Obrigatório
[show-tudo]	booleano	Opcional

Mostre totalmente ou todas as páginas

 [show-all]="true"

[Autoresize]

Propriedade	Tipo	Obrigatório
[Autoresize]	booleano	Opcional

Ative ou desative o REDIMENTO AUTOMAL.

! IMPORTANTE FAZER [autoresize] funcionar-verifique se a tag [original-size]="false" e pdf-viewer possui max-width ou display .

 [autoresize]="true"

[C-maps-url]

Propriedade	Tipo	Obrigatório
[C-maps-url]	corda	Opcional

URL para mapas de origem de caracteres não latinos.

 [c-maps-url]="'assets/cmaps/'"

URL padrão é: https://unpkg.com/[email protected]/cmaps/

Para servir CMAPs por conta própria, você precisa copiar node_modules/pdfjs-dist/cmaps para assets/cmaps .

[F-Borders]

Propriedade	Tipo	Obrigatório
[F-Borders]	booleano	Opcional

Mostrar fronteiras da página

 [show-borders]="true"

(pós-carga-completa)

Propriedade	Tipo	Obrigatório
(pós-carga-completa)	ligar de volta	Opcional

Obtenha informações em PDF com retorno de chamada

Primeiro defina função de retorno de chamada "Callbackfn" em seu controlador,

 callBackFn ( pdf : PDFDocumentProxy ) {
   // do anything with "pdf"
}

E depois use -o em seu modelo:

 (after-load-complete)="callBackFn($event)"

(Página renderizada)

Propriedade	Tipo	Obrigatório
(Página renderizada)	ligar de volta	Opcional

Obtenha um evento quando uma página for renderizada. Pediu cada página renderizada.

Defina o retorno de chamada em seu componente:

 pageRendered ( e : CustomEvent ) {
  console . log ( '(page-rendered)' , e ) ;
}

E depois vincule-o a <pdf-viewer> :

 (page-rendered)="pageRendered($event)"

(Páginas iniciadas)

Propriedade	Tipo	Obrigatório
(Páginas iniciadas)	ligar de volta	Opcional

Obtenha o evento quando as páginas forem inicializadas.

Defina o retorno de chamada em seu componente:

 pageInitialized ( e : CustomEvent ) {
  console . log ( '(pages-initialized)' , e ) ;
}

E depois vincule-o a <pdf-viewer> :

 (pages-initialized)="pageInitialized($event)"

(Caminhada de texto)

Propriedade	Tipo	Obrigatório
(Caminhada de texto)	ligar de volta	Opcional

Obtenha o evento quando uma camada de texto for renderizada.

Defina o retorno de chamada em seu componente:

 textLayerRendered ( e : CustomEvent ) {
  console . log ( '(text-layer-rendered)' , e ) ;
}

E depois vincule-o a <pdf-viewer> :

 (text-layer-rendered)="textLayerRendered($event)"

(erro)

Propriedade	Tipo	Obrigatório
(erro)	ligar de volta	Opcional

Retorno de chamada de manuseio de erros

Defina o retorno de chamada na classe do seu componente

 onError ( error : any ) {
  // do anything
}

Em seguida, adicione-o ao pdf-component no modelo do componente

(error)="onError($event)"

(no progresso)

Propriedade	Tipo	Obrigatório
(no progresso)	ligar de volta	Opcional

Carregando o retorno de chamada de progresso - fornece informações de progresso total e bytes loaded . É chamado várias vezes durante a fase de carregamento em PDF.

Defina o retorno de chamada na classe do seu componente

 onProgress ( progressData : PDFProgressData ) {
  // do anything with progress data. For example progress indicator
}

Em seguida, adicione-o ao pdf-component no modelo do componente

(on-progress)="onProgress($event)"

Renderizar o arquivo PDF local

No seu modelo html , adicione input :

 < input (change) =" onFileSelected() " type =" file " id =" file " >

e adicione o método onFileSelected ao seu componente:

 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 ] ) ;
  }
} 

Defina um caminho personalizado para o trabalhador

Por padrão, o worker é carregado de cdn.jsdelivr.net .

No seu path de atualização de código para o trabalhador, por exemplo, /pdf.worker.mjs

 ( window as any ) . pdfWorkerSrc = '/pdf.worker.mjs' ;

Isso deve ser definido antes que o componente pdf-viewer seja renderizado.

Se você já possui um caso de borda (super raro), onde é executado em um ambiente que vários componentes são carregados de alguma forma na mesma página da web, compartilhando a mesma janela, mas usando versões diferentes do PDF.Worker, o suporte foi adicionado. Você pode fazer o acima, exceto que pode anexar a versão específica dos PDFJs necessários e substituir o caminho personalizado apenas para essa versão . Dessa forma, definir a janela global VAR não entrará em conflito.

 ( window as any ) [ "pdfWorkerSrc2.14.305" ] = '/pdf.worker.mjs' ; 

Pesquise no PDF

Use eventBus para a funcionalidade de pesquisa.

No arquivo TS do seu componente:

• Adicione referência ao componente pdf-viewer ,
• Então, quando necessário, execute search() como este:

@ 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
  } ) ;
} 

Contribuir

Consulte Contribuindo.md

Doação

Se este projeto o ajudar a reduzir o tempo para se desenvolver, você pode me dar uma xícara de chá :)

Licença

Mit © vadym yatsyuk