Estoy intentando pasar una gráficas a pdf y necesito acceder con getElementById al id del div que tiene las gráficas pero no me lo encuentra, he probado a ponerle un id en la llamada al componente hijo y no funciona, tampoco si llamo directamente al id de la gráfica que está en el componente hijo, ¿cómo puedo hacerlo? La idea es hacer que se genere un pdf con una gráfica en cada página, teniendo en cuenta que: hay una gráfica que se ejecuta una vez (graficaPulsi) y otra que es un bucle ngFor (graficaCo2). Al ejecutarlo en el inspector puedo ver los id de cada gráfica.
html del componente padre
<div class="datos" id="datos">
<div style="text-align: center;">
<label>INFORME DESDE {{parametros.fdesde}} HASTA {{parametros.fhasta}}</label>
</div>
<button id='genPDF' (click)="genPDF()">Generar PDF</button>
<app-ultima-medida-pulsi id='app-ult-med-pulsi' *ngIf="hayPulsi"></app-ultima-medida-pulsi>
<app-informe-medidas-co2 *ngIf="hayCo2"></app-informe-medidas-co2>
</div>
html del componente hijo app-ultima-medida-pulsi
<div class="detalles" id="datosPulsi">
<div class="datos">
<div class="tabla">
<div class="cabecera">Fecha: {{fecha | date: "dd/MM/yyyy HH:mm:SS"}}</div>
<div class=doscolumnas>
<div class="columna">Pulsaciones</div>
<div>Saturación</div>
</div>
<div class="doscolumnas">
<div class="columna">{{hr}}bpm</div>
<div>{{spo2}}%</div>
</div>
</div>
<div class="tabla">
<div class="cabecera">Media de la última semana</div>
<div class=doscolumnas>
<div class="columna">Pulsaciones</div>
<div>Saturación</div>
</div>
<div class="doscolumnas">
<div class="columna">{{mediaHr}}bpm</div>
<div>{{mediaSpo2}}%</div>
</div>
</div>
</div>
<div>
<canvas id="graficaPulsi"></canvas>
</div>
</div>
Método genPDF()
genPDF() {
let canvas_image_width: number = 800;
let canvas_image_height: number = 600;
let pulsi: HTMLElement = <HTMLElement>document.getElementById("app-ult-med-pulsi");
if (pulsi!=null){
canvas_image_width = Number(pulsi.getAttribute("width"));
canvas_image_height = Number(pulsi.getAttribute("height"));
}else{
console.log("getElementById es nulo");
}
let pdf = new jsPDF('p', 'pt', 'a4');
//gráfico del pulsioxímetro
if (this.hayPulsi) {
const DATA = <HTMLElement>document.querySelector("datosPulsi");
html2canvas(DATA).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg', 1.0);
pdf.addImage(imgData, 'JPG', 0, 0, 800, 600);
});
}
//gráfico de CO2
if (this.hayCo2){
const DATA = <HTMLElement>document.querySelector("graficaCo2");
html2canvas(DATA).then(canvas=>{
var imgData = canvas.toDataURL('image/jpeg',1.0);
pdf.addImage(imgData, 'JPG', 0, 0, canvas_image_width, canvas_image_height);
})
//gráficos de temperatura y humedad("grafica0","grafica1",etc)
}
pdf.save("grafico.pdf");
}
EDITADO: Tenía 2 problemas, uno lo solventé buscando por nombre de clase en vez de por ID (getElementByClassName) y el otro era que como angular es asíncrono, me salvaba el documento antes de tener las gráficas renderizadas, que solucioné con un timeout de 3 segundos. Gracias @Pablo Lozano por tu tiempo.
hayPulsi
es falso