从Chart.js到pdf的图表

我看过很多帖子，描述了如何使用

chart.js

使用

canvas

创建图形，然后将

canvas

保存到png，并将其导入到

pdf

中。这很好，但是如果您想绕过屏幕上的部分，直接转到pdf文档并包含图像，该怎么办

例如，我可能有两个按钮，一个按钮使用

canvas

在屏幕上打开图表。然后，此页面可以毫无问题地保存图表并将其导入pdf。另一个按钮直接打开

pdf

。是否可以将图表放入此文档中，或者先将其保存在服务器上，或者不保存

我想可能会有人告诉我转到d3，但我只是想知道在

chart.js

中是否有可能

这很好，但是如果您想绕过屏幕上的部分，直接转到pdf文档并包含图像，该怎么办

您仍然可以将chart.js作为PDF导出到PhantomJs（一种无头浏览器，可以打开包含图表的html页面，并通过PDF保存）。如果您正在使用nodejs，那么有一个很好的库可以抽象PhantomJs并简化PDF：。这似乎是一个解决办法，但通常这些画布到PDF不能很好地呈现，特别是图表

是的，您仍然需要创建html页面来打印PDF，但是您有两个选项：

• 使用相同的页面，并且（因为PhantomJs将在打印模式下创建PDF）

• 仅为PDF渲染创建自定义网页

---

虽然这并不能直接回答问题，因为我无法让chart.js做我想做的客户端工作，但我发现了一个很好的解决方案。生成pdf时，将创建图表并临时保存在服务器上，直到完成pdf。该图表将插入pdf，然后从服务器上删除该图表。要正确调整图像大小，需要进行一些操作

$myPicture->render("path/imagename.png");

if (file_exists("path/imagename.png")) {
    $ycurrent = $pdf->GetY();
    list($width, $height) = getimagesize("path/imagename.png");
    $imageWidth = 160;
    $ratio = $imageWidth/$width;
    $xpos = 25;
    $pdf->Image("path/imagename.png", $xpos, $ycurrent, $width * $ratio, $height * $ratio, "png", '');
    unlink ("path/imagename.png");
}

---

我正在研究一个类似的问题，并建立了一个。它是一个web服务，以多种静态格式（包括PDF）呈现Chart.js图表

完整的源代码如下：

你可能会特别感兴趣。该解决方案构建在Javascript画布实现（节点画布）和Chart.js包装库（chartjs节点画布）之上。首先，使用画布将图表渲染为PNG图像。然后将PNG定位在文档上，并使用pdfkit呈现

希望你觉得源代码有用。我还免费提供QuickChart web服务，因此您可以直接使用web API

https://quickchart.io/chart?width=500&height=300&format=pdf&c={chart.js config here}

以下是一个动态生成的PDF图表示例：

---

啊。。。明亮的这是正确的方法还是一种解决方法？PhantomJS是将HTML页面呈现为PDF格式的最佳方法，特别是图表。这些从画布到PDF的内容并不像我们在浏览器上看到的那样呈现。好吧，但我不希望呈现整个html页面，也不希望将此图像转换为PDF，因为PDF中有来自其他地方的其他内容。我是否正确地理解您，我可以使用phantom js打开生成画布的html页面，然后将其保存在服务器上，然后打开导入保存图像的pdf文档？没错。您如何以另一种方式在服务器上执行此操作？即使这看起来很奇怪，但这是将图表呈现为PDF格式的唯一方法，与它们在浏览器上的外观完全相同。另一种方法是在您的服务器/后端使用一些库来完成这项工作，但是它看起来不像d3或chart.js，因为这些图表是为前端制作的。