Header Ads Widget

Ticker

6/recent/ticker-posts

Incrustar y mostrar archivos PDF en Angular 10

 En este tutorial, aprenderemos cómo incrustar y mostrar archivos PDF en Angular creando una aplicación de ejemplo simple usando la última versión de Angular 10.

Archivos PDF de Angular 10 View

En primer lugar, ¿qué es un archivo PDF?

Según Wikipedia :

El formato de documento portátil (PDF) es un formato de archivo desarrollado por Adobe en la década de 1990 para presentar documentos, incluido el formato de texto y las imágenes, de una manera independiente del software de aplicación, el hardware y los sistemas operativos.

Ahora veamos cómo ver archivos PDF en su aplicación Angular 10 por ejemplo.

Tenemos dos opciones populares para mostrar archivos PDF en Angular:

  • Usando el visor de PDF integrado en su navegador,
  • El visor de PDF de Mozilla y Chrome llamado pdf.js ,
  • Usando una biblioteca angular como ng2-pdf-viewerngx-extended-pdf-viewer.

Para simplificar las cosas, usaremos la ng2-pdf-viewerbiblioteca en nuestro ejemplo.

Antes de comenzar, necesita algunos requisitos previos:

  • Conocimientos básicos de TypeScript. En particular, la familiaridad con conceptos orientados a objetos como clases y decoradores de TypeScript.
  • Una máquina de desarrollo local con Node 10+ , junto con NPM 6+ instalado. La CLI de Angular requiere un nodo como la mayoría de las herramientas frontend en la actualidad. Simplemente puede ir a la página de descargas del sitio web oficial y descargar los binarios para su sistema operativo. También puede consultar las instrucciones específicas de su sistema sobre cómo instalar Node usando un administrador de paquetes. Sin embargo, la forma recomendada es usar NVM - Node Version Manager - un script bash compatible con POSIX para administrar múltiples versiones activas de Node.js.

Nota : Si no desea instalar un entorno local para el desarrollo de Angular pero aún desea probar el código en este tutorial, puede usar Stackblitz , un IDE en línea para el desarrollo de frontend que puede usar para crear un proyecto Angular compatible con Angular. CLI.

Paso 1: instalación de Angular CLI 10

En este paso, instalaremos la última versión de Angular CLI 10 (en el momento de escribir este tutorial).

Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos Angular. Para instalarlo, abra una nueva interfaz de línea de comandos y ejecute el siguiente comando:

$ npm install -g @angular/cli

En el momento de escribir este tutorial, angular / cli v10 estará instalado en su sistema.

Paso 2: creación de una nueva aplicación de Angular 10

Creemos ahora nuestro proyecto. Regrese a su interfaz de línea de comandos y ejecute los siguientes comandos:

$ cd ~
$ ng new angular10pdf

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo local usando los siguientes comandos:

$ cd angular10pdf
$ ng serve    

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

A continuación, abra una nueva terminal y asegúrese de navegar a la carpeta de su proyecto y ejecutar el siguiente comando para instalar la ng2-pdf-viewerbiblioteca desde npm usando el siguiente comando:

$ npm install ng2-pdf-viewer

A continuación, abra el src/app/app.module.tsarchivo e importe PdfViewerModuledesde ng2-pdf-viewersu módulo de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import  {  PdfViewerModule  }  from  'ng2-pdf-viewer';
import { FormsModule } from '@angular/forms';


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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    PdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Una vez que se ha importado la biblioteca, puede usar el ng2-pdf-viewercomponente en su aplicación Angular.

Tenga en cuenta que también hemos importado FormsModule.

A continuación, abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    pdfSource =  "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}

A continuación, abra el src/app/app.component.htmlarchivo y agregue el siguiente código:

<h1> Angular 10 PDF Viewer</h1>

<div class="container">
  <pdf-viewer [src]="pdfSource"
              [original-size]="false"
  ></pdf-viewer>
</div>

A continuación, agregue un área de texto para ingresar el valor que desea codificar:

<h1> Angular 10 PDF Viewer</h1>

<div class="container">
  <textarea [(ngModel)] = "pdfSource"></textarea>

  <pdf-viewer [src]="pdfSource"
              [original-size]="false"
  ></pdf-viewer>
</div>

Finalmente abra el src/styles.cssarchivo y agregue los siguientes estilos:

pdf-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(5px 5px 5px #222222);
}

textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

Eso es todo, hemos terminado nuestro ejemplo de Angular 10 que le muestra cómo ver archivos PDF en sus aplicaciones Angular. Puede visitarnos Techiediariespara obtener tutoriales sobre prácticas de desarrollo web modernas y angulares.

Puede consultar la aplicación que hemos creado en este artículo en vivo en https://stackblitz.com/edit/angular-10-pdf-viewer-example

Si necesita un visor de PDF completo en su aplicación Angular 10, puede usarlo ngx-extended-pdf-vieweren su lugar, que viene con miniaturas, búsqueda, impresión, varias herramientas de selección, etc.

Primero debe agregar el siguiente objeto de configuración en el angular.jsonarchivo:

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "node_modules/ngx-extended-pdf-viewer/assets/",
      "output": "/assets/"
    }
  ],
  "scripts": []

Después de actualizar el angular.jsonarchivo, debe ejecutar el npm install ngx-extended-pdf-viewer --savecomando, agregarlo NgxExtendedPdfViewerModulea la importsmatriz de su archivo de módulo e incrustar la etiqueta del visor de la siguiente manera:

<ngx-extended-pdf-viewer
     src="URL.pdf"
     useBrowserLocale="true">
</ngx-extended-pdf-viewer>

Conclusión

Hemos visto por ejemplo cómo incrustar y mostrar archivos PDF en su aplicación Angular 10.

Publicar un comentario

0 Comentarios