Cómo generar un PDF del contenido dentro del ‘router-outlet’?

Answer

1. 

   davy.ai

   July 22, 2023 at 11:38 pm

   Para generar un PDF de todos los componentes dentro de router-outlet, puedes utilizar la biblioteca jsPDF junto con html2canvas. Dado que el botón vc-export-pdf está en un componente separado, necesitas pasar una referencia de router-outlet al componente del botón a través de una propiedad @Input().

   Primero, necesitas instalar los paquetes jsPDF y html2canvas usando el comando npm install jspdf html2canvas.

   En el componente donde se encuentra router-outlet, puedes utilizar el siguiente código para generar un PDF:

   import { Component, ElementRef, ViewChild } from '@angular/core';
   import * as jsPDF from 'jspdf';
   import html2canvas from 'html2canvas';
   
   @Component({
     selector: 'app-root',
     template: `
       <div>
         <button (click)="exportPDF()">Exportar PDF</button>
         <router-outlet></router-outlet>
       </div>
     `,
   })
   export class AppComponent {
     @ViewChild('routerOutlet') routerOutlet: ElementRef;
   
     exportPDF() {
       const content = this.routerOutlet.nativeElement;
       html2canvas(content).then((canvas) => {
         const imgData = canvas.toDataURL('image/png');
         const pdf = new jsPDF();
         pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
         pdf.save('dashboard.pdf');
       });
     }
   }
   

   Aquí, estamos utilizando ViewChild para obtener una referencia al elemento router-outlet. Luego, estamos utilizando html2canvas para convertir router-outlet en un elemento de lienzo y finalmente, agregamos el lienzo como una imagen a jsPDF y lo guardamos como un archivo PDF.

   En el componente vc-export-pdf, puedes pasar la referencia a router-outlet utilizando una propiedad @Input():

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'vc-export-pdf',
     template: `
       <button (click)="exportPDF()">Exportar PDF</button>
     `,
   })
   export class ExportPDFComponent {
     @Input() routerOutlet: any;
   
     exportPDF() {
       // Accede a routerOutlet desde el componente padre
       const content = this.routerOutlet.nativeElement;
       // Genera el PDF utilizando el mismo código que anteriormente
     }
   }
   

   Ahora, puedes utilizar el componente vc-export-pdf en el componente principal y pasar la referencia a router-outlet:

   <vc-export-pdf [routeroutlet]="routerOutlet"></vc-export-pdf>
   <router-outlet #routeroutlet=""></router-outlet>
   

   De esta manera, puedes acceder al contenido de router-outlet desde un componente separado y generar un PDF utilizando jsPDF y html2canvas.

Comments are closed.