Last active
June 19, 2024 20:13
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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