1

I have a few line charts that I made using ng2-charts in my program. I was able to tabulate the data onto a jsPdf document with the help of AutoTable

autoTable(doc, {
      startY: 190,                    
      theme: 'grid',
      headStyles: {
        fillColor: [32,42,68]
      },
      head: [//Arry],
      body: //detArr,
     // bodyStyles: {lineColor: [0, 0, 0]}
    });

Is there a way that I can directly position the HTML DOM Canvas element of the chart into the pdf file so that I can prepare it for printing and presentation?

<canvas baseChart width="1000" height="250" [type]="'line'" [data]="chartData" [options]="lineChartOptions" [legend]="lineChartLegend"></canvas>
Nooh Ahamad
  • 353
  • 10
  • 23

1 Answers1

1

Pre-requisites:

  • Get the <canvas> element from the View in the component by id (#baseChart).
<canvas #baseChart width="1000" height="250" [type]="'line'" [data]="chartData" 
    [options]="lineChartOptions" [legend]="lineChartLegend"></canvas>

import { Component, ElementRef, Inject, ViewChild } from '@angular/core';

@ViewChild('baseChart', { static: true })
  canvasElem: ElementRef<HTMLCanvasElement>;

  1. Create a jsPDF instance.

  2. Convert the <canvas> element to image.

  3. Add the image into PDF via addImage method. You may also customize your image such as coordinates, sizes, etc.

  4. Export the PDF.

const pdf = new jsPDF({
  unit: 'px',
  format: [595, 842],
});

let img = this.canvasElem.nativeElement.toDataURL('image/png');
pdf.addImage(img, 'PNG', 10, 10, 580, 300);

pdf.save(/* File name */);
Yong Shun
  • 35,286
  • 4
  • 24
  • 46
  • A similar [demo](https://stackblitz.com/edit/angular-xeicw9?file=src/main.ts) on printing the Chart.js chart to PDF. – Yong Shun Mar 22 '23 at 10:14
  • Can you create a minimal, reproducible example in StackBlitz? It's hard to solve without knowing your actual code. – Yong Shun Mar 23 '23 at 12:45