Question

第二次更新：

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

问题已解决： 我无法使生成的PDF上的画布图像看起来更好，并且该项目的截止日期将要截止，最后，我决定将“ PDF报告”功能从前端（角度）移动到后端（python），我已经发布了答案（不是我自己问题的答案，而是更像是解决方案）

搜索几天后更新：

我已经用Echarts替换了Chart.js，但是模糊的问题仍然存在。我在jsPDF和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>

打字稿代码：

  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，因为我们需要您的方案中的同步行为。

Answer 2

这是一种解决方法，而不是所描述的jsPDF问题的直接解决方案。我面临着完全相同的问题：jsPDF，图表和角度的模糊性。

希望我并没有离题太远，但是我认为这对某些人来说很有价值。

解决方法：节点+ puppeteer

puppeteer是一款无头的chrome浏览器，可以在任何环境（甚至Linux终端）下运行，并且可以将网页呈现为图像或PDF。

    import * as puppeteer from "puppeteer";

    const browser = await puppeteer.launch({});
    const page = await browser.newPage();

    await page.goto("https://google.com", { waitUntil: 'networkidle2' });
    await page.setViewport({ width: 1250, height: 3950 });
    await page.screenshot({ path: 'hourly_report.png' });
    await browser.close();

Answer 3

感谢所有回答了我问题的人，非常感谢您的帮助 我在jsPDF + Chart.js上花了2个多星期，但仍然不知道如何正确打印画布图像上的PDF。

这个项目是新的，语言/工具/依赖关系不受限制。为了使项目按时完成，我将PDF报告从Front-End（Angular）切换到Back-End（Python）。现在我花了2天的时间来完成PDF。

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

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

非常感谢 Weasyprint 使生成具有HTML和CSS的PDF文档非常有效！这是我生成的PDF：

以PDF格式下载时，画布图表模糊不清

第二次更新：

搜索几天后更新：

原始问题：

3 个答案: