Skip to content

Instantly share code, notes, and snippets.

@ljchuello
Last active June 19, 2024 20:13
Show Gist options
  • Save ljchuello/28b51515022898d554788b325ba185e6 to your computer and use it in GitHub Desktop.
Save ljchuello/28b51515022898d554788b325ba185e6 to your computer and use it in GitHub Desktop.
Impresion de html a angular de un div que se llame print-container
import {Component} from '@angular/core';
import JsPDF from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrl: './index.component.css'
})
export class IndexComponent {
// document.body.innerHTML = document.getElementById('print-container')!.innerHTML!;
// window.print();
// location.reload();
// return false;
btnImprimir() {
let elementToPrint: any = document.getElementById('print-container');
html2canvas(elementToPrint, {scale: 3}).then((canvas) => {
let pdf: JsPDF = new JsPDF('p', 'mm', 'a4'); // Configura el PDF a tamaño A4
let imgWidth = 211 - 20; // Ancho del PDF en mm menos 20 mm (10 mm de margen a cada lado)
let pageHeight = 280; // Altura del PDF en mm
let imgHeight = canvas.height * imgWidth / canvas.width;
let position = 10; // Margen superior de 10 mm
let pageCanvasHeight = canvas.height * (imgWidth / canvas.width);
let totalPages = Math.ceil(pageCanvasHeight / pageHeight);
let ctx = canvas.getContext('2d');
ctx!.imageSmoothingEnabled = false;
// Cortar el canvas en páginas completas, evitando partir líneas
for (let i = 0; i < totalPages; i++) {
let onePageCanvas = document.createElement('canvas');
onePageCanvas.width = canvas.width;
onePageCanvas.height = pageHeight * (canvas.width / imgWidth);
let onePageCtx = onePageCanvas.getContext('2d');
// Copiar el contenido de la página
let startY = i * onePageCanvas.height;
onePageCtx!.drawImage(canvas, 0, startY, canvas.width, onePageCanvas.height, 0, 0, canvas.width, onePageCanvas.height);
onePageCtx!.imageSmoothingEnabled = false;
// Agregar el número de página en la esquina inferior derecha
let pageNumber = i + 1;
pdf.setPage(pageNumber);
pdf.text(`Página ${pageNumber}/${totalPages}`, imgWidth - 20, pageHeight - 10, { align: 'right' });
let imageData = onePageCanvas.toDataURL('image/png', 1.0);
pdf.addImage(imageData, 'PNG', 10, position, imgWidth, onePageCanvas.height * (imgWidth / canvas.width), undefined, 'FAST');
if (i < totalPages - 1) {
pdf.addPage();
}
}
pdf.save('soyunpdf.pdf');
location.reload();
return false;
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment