бновление:

Еще раз спасибо всем, кто прокомментировал / ответил на мой вопрос

Задача решена: Я не могу заставить изображение холста выглядеть лучше на сгенерированном PDF, и срок выполнения проекта закрывается, наконец, я решил переместить функцию «Отчет PDF» с Front-End (Angular) на Back-End (python) Я выложил ответ (не совсем ответ на мой вопрос, но больше похоже на решение)

Обновление через пару дней поиска:

Я заменил Chart.js на Echarts, но проблема все еще существует. Я много занимался поиском по jsPDF и Canvas blurry онлайн, похоже, что параметры холста нужно настраивать, к сожалению, я понятия не имею, как этого добиться.

Как выглядит в брассере:

При загрузке в формате PDF:

Оригинальный вопрос:

У меня есть проект Angular, который требуется для загрузки PDF для графических данных. Я выбираю Chart.js и jspdf, который работает хорошо. Когда я печатаю 2 диаграммы на одной странице, разрешение в порядке, но когда я пытаюсь напечатать 3 диаграммы на одной странице, текст размыт. Я прочитал этоаналогичный вопрос но не выяснил, как улучшить разрешение при наличии нескольких графиков.

HTML-код:

  <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>

Машинописный код:

  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);
  }

Кто-нибудь может помочь? Как решить эту проблему? Заранее спасибо! Изображение 1 - это то, как оно выглядит на веб-странице, а изображение 2 - файл PDF.