angular – 以PDF格式下载时,Canvas图表模糊不清

第二次更新：

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

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

几天后更新搜索：

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

如何看待broswer：

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

打字稿代码：

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

您需要在addImage中设置高度和宽度

doc.addImage(canvasImage,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,title);

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

    let dimensions = await getImageDimensions(canvasImage);

    height += margin;
    doc.addImage(canvasImage,dimensions.w,dimensions.h);
  }

从here复制的getImageDimensions函数,此函数使用Promises,因为我们需要在您的场景中使用同步行为.

angular – 以PDF格式下载时,Canvas图表模糊不清

猜你在找的Angularjs相关文章