Vfrdtyky

2nd Update:

Thanks again for everyone who commented/answered my question

Problem solved:
I am not able to make canvas image looks better on the generated PDF and the due date of the project is closing, finally, I decided to move the "PDF Report" feature from Front-End(Angular) to Back-End(python), I have posted an answer(not really an answer for my own question, but more like a solution)

Update after a couple of days search:

I have replaced Chart.js with Echarts but the blurry issue still exists. I did a lot of search on jsPDF and Canvas blurry online, it seems like the canvas settings need to be customized, unfortunately, I have no clue how to achieve it.

How looks in broswer:

When download as PDF:

Original Question:

I have an Angular project which is required to download PDF for graph data. I choose Chart.js and jspdf which works well. When I print 2 charts in one page, the resolution is okay but when I try to print 3 charts on the same page, the texts are blurry. I have read this similar question but not figured out how to make resolution better when having multiple charts.

HTML Code:

  <div class="col-md-4">

    <div class="card card-chart">

      <div class="card-header">

        <h5 class="card-title">Cervical Lateral Flexion</h5>

        <!--<p class="card-category">Line Chart</p>-->

      </div>

      <div class="card-body">

        <canvas id="cervicalLateralFlexion"></canvas>

      </div>

    </div>

  </div>

Typescript Code:

  public static buildChart(doc, selector, title, yHeight) {

    let height = yHeight;

    const canvas = document.querySelector(selector) as HTMLCanvasElement;

    doc.setFontSize(h5);

    doc.text(leftMargin, yHeight, title);

    const canvasImage = canvas.toDataURL('image/png');

    height += margin;

    doc.addImage(canvasImage, 'PNG', leftMargin, height);

  }

Can anyone help? How to solve this issue? Thanks in advance!
Image 1 is how it looks on web page and image 2 is PDF file.

You need to set the height and width in addImage

doc.addImage(canvasImage, 'PNG', leftMargin, height, "IMAGE-WIDTH-HERE", "IMAGE-HEIGHT-HERE");

If you don't know the image dimensions try something like this.

function getImageDimensions(file) {

  return new Promise (function (resolved, rejected) {

    var i = new Image()

    i.onload = function(){

      resolved({w: i.width, h: i.height})

    };

    i.src = file

  })

}



public static buildChart(doc, selector, title, yHeight) {

    let height = yHeight;

    const canvas = document.querySelector(selector) as HTMLCanvasElement;

    doc.setFontSize(h5);

    doc.text(leftMargin, yHeight, title);



    const canvasImage = canvas.toDataURL('image/png, 1.0');



    let dimensions = await getImageDimensions(canvasImage);



    height += margin;

    doc.addImage(canvasImage, 'PNG', leftMargin, height, dimensions.w, dimensions.h);

  }

getImageDimensions function copied from here, this function uses Promises since we need synchronous behavior in your scenario.

This is a workaround, not a direct solution to the jsPDF issues described. I was faced with the exact same issue: jsPDF, blurriness for charts and angular.

Hopefully, I'm not straying too far off topic but I thought this would be valuable for some.

The workaround: node + puppeteer

puppeteer is a headless chrome browser that works under any environment (even linux terminal) and can render a web page into an image or PDF.

    import * as puppeteer from "puppeteer";



    const browser = await puppeteer.launch({});

    const page = await browser.newPage();



    await page.goto("https://google.com", { waitUntil: 'networkidle2' });

    await page.setViewport({ width: 1250, height: 3950 });

    await page.screenshot({ path: 'hourly_report.png' });

    await browser.close();

Thanks all for whom answered my question, I really appreciate your help
I spent more than 2 weeks on jsPDF + Chart.js but still not figuring out how to print PDF with canvas images properly.

This project is new, the languages/tools/dependencies are not restricted. To make the project done on time I switch the PDF report from Front-End(Angular) to Back-End(Python).
Now it took me 2 days to complete the PDF.

sources I used to generate PDF report and Charts:

• Weasyprint https://weasyprint.org/
  


• Pygal http://pygal.org/en/stable/
  

Many thanks to Weasyprint for making generating PDF documents with HTML and CSS productive!
Here's the PDF I have been generated: