第二次更新：
再次感谢所有评论/回答我问题的人
问题解决了：
我无法使生成的PDF上的画布图像看起来更好,并且项目的截止日期正在结束,最后,我决定将“PDF报告”功能从前端(Angular)移动到后端(python),我已经发布了一个答案(不是我自己的问题的答案,但更像是一个解决方案)
几天后更新搜索：
我已将Chart.js替换为Echarts但模糊问题仍然存在.我在网上搜索jsPDF和Canvas模糊了很多,看起来画布设置需要定制,遗憾的是,我不知道如何实现它.
原始问题：
我有一个Angular项目,需要下载图表数据的PDF.我选择了Chart.js和jspdf,效果很好.当我在一个页面中打印2个图表时,分辨率是可以的,但是当我尝试在同一页面上打印3个图表时,文本模糊.我已经阅读了这篇similar question但是没有想出如何在拥有多个图表时使分辨率更好.
@H_502_22@<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>打字稿代码：
@H_502_22@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); }
您需要在addImage中设置高度和宽度
@H_502_22@doc.addImage(canvasImage,height,"IMAGE-WIDTH-HERE","IMAGE-HEIGHT-HERE");
原文链接：https://www.f2er.com/angularjs/141275.html如果您不知道图像尺寸,请尝试这样的方法.
@H_502_22@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,因为我们需要在您的场景中使用同步行为.
