以PDF格式下载时,画布图表很模糊

Question

第二次更新:

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

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

几天后更新搜索:

我已将Chart.js替换为Echarts,但模糊的问题仍然存在.我在网上搜索jsPDF和Canvas模糊了很多,看起来画布设置需要自定义,不幸的是,我不知道如何实现它.

如何看待broswer:

以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文件.

Answer 1

2020 年 5 月 10 日更新 我录制了几个关于如何使用 Wea​​syprint 和 Plotly 构建 PDF 报告的视频，您可以在这里找到详细信息：https ://www.youtube.com/watch?v=hjWTCYPy7oU&t=1s

2020年2月3日更新：

我发现Plotly导出静态图像时真的很神奇，强烈推荐。查看我构建的图像，您可以将其与我原来的问题帖子图像进行比较： 有几个特点：

• 图像可以保存为 SVG 或 PNG。再也不用担心模糊问题了！
• 很容易定制主题/风格
• 您可以在图表上添加任何形状，请参阅蓝色垂直线，您可以绘制三角形、矩形（请参阅填充的灰色区域）和任何其他您想要的形状。
• 它支持多种语言：JS、Python 和 R。

2019年原帖：

感谢所有回答我问题的人，我真的很感谢你们的帮助， 我在 jsPDF + Chart.js 上花了两周多的时间，但仍然不知道如何正确打印带有画布图像的 PDF。

这个项目是新的，语言/工具/依赖项不受限制。为了按时完成项目，我将 PDF 报告从前端（Angular）切换到后端（Python）。现在我花了两天时间才完成PDF。

我用来生成 PDF 报告和图表的来源：

• Weasyprint https://weasyprint.org/
• Pygal http://pygal.org/en/stable/

非常感谢Weasyprint使使用 HTML 和 CSS 生成 PDF 文档变得高效！这是我生成的 PDF：