图表从 chart.js 转为 pdf
我看过很多帖子，描述了如何使用
chart.js
通过
canvas
创建图表，然后将
canvas
保存为 png，并将其导入
pdf
。这很好，但是如果您想绕过屏幕部分并直接转到 pdf 文档并包含图像，该怎么办？
例如，我可能有两个按钮，一个使用
canvas
在屏幕上打开图表。然后，此页面可以毫无问题地处理图表保存和导入 pdf。另一个按钮直接打开
pdf
。是否可以将图表放入此文档，无论是否先以某种方式将其保存在服务器上？
我怀疑我可能会被告知转到 d3，但我只是想知道在
chart.js
中是否可以实现？
This is fine but what if you want to bypass the on screen part and go straight to a pdf document and include the image
您仍然可以使用 chart.js 通过 PhantomJs（一种无头浏览器，它将打开包含图表的 html 页面，并通过 PDF 保存）导出为 PDF。如果您使用 nodejs，有一个很好的库可以抽象 PhantomJs 并使 PDF 变得简单： https://github.com/sindresorhus/pageres 。这似乎是一种解决方法，但通常这些画布到 PDF 的渲染效果不佳，特别是图表！
是的，您仍然需要创建一个 html 页面来打印您的 PDF，但是您有 2 个选项：
-
使用相同的页面，并且 通过 CSS 打印样式，您可以显示/隐藏仅在 PDF 上打印的内容 （因为 PhantomJs 将在打印模式下创建 PDF）。
-
仅为 PDF 渲染创建自定义网页
我正在研究类似的问题并构建了 QuickChart 。它是一种 Web 服务，可以以多种静态格式（包括 PDF）呈现 Chart.js 图表。
完整源代码在此处： https://github.com/typpo/quickchart
您可能对 lib/charts.js 和 lib/pdf.js 特别感兴趣。该解决方案建立在 Javascript 画布实现（node-canvas）和 Chart.js 包装器库（chartjs-node-canvas）之上。首先，使用画布将图表渲染为 PNG 图像。然后将 PNG 放置在文档上并使用 pdfkit 进行渲染。
希望您觉得源代码有用。我还免费托管 QuickChart Web 服务，因此您可以直接使用 Web API
https://quickchart.io/chart?width=500&height=300&format=pdf&c={chart.js config here
以下是即时生成的 PDF 图表的示例：
虽然这不能直接回答问题，因为我无法让 chart.js 在客户端做我想做的事情，但我找到了一个很好的解决方案，使用 pChart 。在生成 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");
}