0

La consulta es simple. ¿Cuál librería puedo usar para transformar parte de un código en un para imprimir que sea compatible con Angular 10?.

Intentos

Yo estuve utilizando para hacer el screenshot y para crear el pdf propiamente dicho. Me funcionó ok en un proyecto de , pero por un inconveniente, tuve que empezar a reestructura todo el código del proyecto (cuento con todos los códigos fuente), y opté por usar la versión mas reciente de , y sucede que estas librerías no funcionan correctamente.

Las capturas se hacen mal, me agrega márgenes superiores enormes y hasta a veces el pdf sale en blanco (porque arrastró todo hacia abajo). Si alguien las conoce y quiere que le muestre el código, me avisa, buscaré la forma de hacerme entender.

Pero escucho sus recomendaciones para resolver este problema. Siempre desde JavaScript

4
  • Tu pregunta va a terminar cerrada por qué: La pregunta está buscando recomendaciones de libros,herramientas,librerías u otros recursos externos
    – user128299
    Commented el 18 sept. 2020 a las 15:49
  • 1
    Yo he tenido problemas con el html2canvas , debido a que únicamente genera la imagen que hay en pantalla por lo que he optado por dom-to-image Commented el 18 sept. 2020 a las 16:52
  • Gracias Eduardo, voy a probar con esa librería.
    – FerMV
    Commented el 18 sept. 2020 a las 18:54
  • @EduardoJaramilloLicea he modificado tu pregunta para que a pesar de que sea una solicitud de recomendación, ya no se base en opiniones, sino que te puedan responder con cosas concretas que satisfagan las necesidades específicas de compatibilidad. Commented el 21 nov. 2020 a las 17:46

1 respuesta 1

2

No comparto las puntuaciones negativas a mi pregunta, de hecho el comentario de @Eduardo Jaramillo Licea me ayudó y voy a compartir la respuesta, ojalá pueda ayudar a alguien mas: 1 - Instalar la librería DOM to Image

npm i dom-to-image

2 - Instalar librería jspdf

npm i jspdf

en nuestro app.component.html colocaremos un id, elemento del DOM que queremos capturar. Yo elegí #pdf.

<div class="container">
<div id="pdf">
    <h1>Este es un título</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>

</div>


<button class="btn btn-primary" (click)="pdf()">Download PDF</button>

3 - En nuestro app.component.ts incluiremos ambas dependencias y creamos la función pdf().

import { Component, OnInit}     from '@angular/core';
import { jsPDF } from 'jspdf'
import domtoimage from 'dom-to-image';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [UserService]
})
export class AppComponent implements OnInit {

constructor(){
}
ngOnInit(){
    console.log('app.component cargando'); 
 
}
pdf(){
    var canvas = document.getElementById('pdf');

    domtoimage.toPng(canvas).then((dataUrl)=>{
        let imagen= new Image();
        imagen.src=dataUrl;/*obtengo el screenshot*/
        let pdf = new jsPDF('l','mm','A4');/* creamos el pdf con jspdf, l es de landscape, mm: medidas en milímetros, y A4 el formato*/
        pdf.addImage( imagen, 18, 10, 260,189); /*imagen: es la captura que insertaremos en el pdf, 18: margen izquierdo, 10: margen superior, 260:ancho, 189:alto, pueden jugar con estos valores, de esta forma me quedó prolijo en A4 horizontal*/
        pdf.save( 'documento.pdf' ); /* descargamos el pdf con ese nombre.*/
    }
    );
}
}

app.component.css

h1 {
text-align: center;
}

#pdf {
border: solid 3px #000;
margin: 0;
text-align: justify;
}
3
  • Mi pregunta esta basada en un caso concreto, explico que tengo problemas con un método que utilizo, "de hecho", si observas el comentario, alguien también lo tuvo, y gracias a su "opinión" encontré la solución y la publique. Voten lo que quieran.
    – FerMV
    Commented el 18 sept. 2020 a las 22:07
  • Muchas graciasssssssssssss, amigo en verdad estaba desesperado estaba en angular 9 intentando con los métodos que mencionaste y me pasaba exactamente lo mismo. gracias por tu aporte me sirvió mucho ya que muchas librerías para convertir en pdf se encuentran un poco olvidadas y des actualizadas. Gracias por tu aporte <3 Commented el 21 nov. 2020 a las 3:48
  • lo que pasa que Eduardo no te dió una opinión. Y el problema en sí no es la pregunta, es la forma en que se hace y podrían haberte respondido cosas como "te recomiendo usar jasper reports y pasar tu programa a Java", es por eso que la comunidad es tan estricta con este tipo de preguntas. Commented el 21 nov. 2020 a las 17:49

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.