angular - 下载为 PDF 时 Canvas 图表模糊

Question

第二次更新:

再次感谢所有评论/回答我问题的人

问题解决:我无法使 Canvas 图像在生成的 PDF 上看起来更好，并且项目的截止日期即将结束，最后，我决定将“PDF 报告”功能从前端( Angular )移动到后端(python) ，我已经发布了一个答案(不是我自己问题的真正答案，但更像是一个解决方案)

搜索几天后更新:

我已经用 Echarts 替换了 Chart.js 但模糊的问题仍然存在。我在网上搜索了很多 jsPDF 和 Canvas blurry，似乎需要自定义 Canvas 设置，不幸的是，我不知道如何实现它。

在浏览器中的外观:

下载为 PDF 时:

原始问题:

我有一个 Angular 项目，需要它才能下载图形数据的 PDF。我选择效果很好的 Chart.js 和 jspdf。当我在一页上打印 2 个图表时，分辨率还可以，但是当我尝试在同一页上打印 3 个图表时，文本很模糊。我读过这个similar question但不知道如何在有多个图表时提高分辨率。

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>

typescript 代码:

  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 文件。

Answer 1

需要在addImage中设置高宽

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

如果您不知道图像尺寸，请尝试这样的操作。

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 函数复制自 here ，此函数使用 Promises，因为我们需要在您的场景中进行同步行为。