从 chart.js 到 pdf 的图表 [英] Chart from chart.js to pdf
问题描述
我看到很多帖子描述了如何使用 chart.js 使用 canvas 创建图形，然后保存 canvas 转为 png，并将其导入到 pdf 中.这很好，但是如果您想绕过屏幕部分并直接进入 pdf 文档并包含图像怎么办?
I have seen a lot of posts describing how you can use chart.js to create a graph using canvas and to then save the canvas to png, and import it into a pdf. 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?
例如，我可能有两个按钮，一个使用 canvas 在屏幕上打开图表.然后，此页面可以毫无问题地处理图表保存和导入 pdf.另一个按钮直接打开 pdf.是否可以将图表放入此文档中，或者先以某种方式将其保存在服务器上?
For example, I may have two buttons, one that opens the chart on screen using canvas. This page could then handle the chart saving and importing into the pdf without a problem. The other button opens the pdf directly. Is it possible to get the chart into this document, either saving it on the server first somehow or not?
我怀疑我可能会被告知转移到 d3，但我只是想知道在 chart.js 中是否有可能?
I suspect I might be told to move over to d3 but I was just wondering if it is possible in chart.js?
推荐答案
这很好，但是如果您想绕过屏幕部分并直接进入 pdf 文档并包含图像怎么办
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
您仍然可以通过 PhantomJs(一种无头浏览器，可以打开包含图表的 html 页面，并通过 PDF 保存它)将 chart.js 导出为 PDF.如果您正在使用 nodejs，那么有一个很好的库可以抽象 PhantomJs 并使 PDF 变得简单:https://github.com/sindresorhus/pageres.这似乎是一种解决方法，但通常这些画布到 PDF 的渲染效果不佳，尤其是图表！
You can still use chart.js exporting as PDF with PhantomJs (a headless browser that will open a html page with your charts, and save it via PDF). If you are working with nodejs there's a good library that abstracts PhantomJs and make the PDF easy: https://github.com/sindresorhus/pageres. It seems like a workaround, but usually these canvas to PDF doesn't render well, specially charts!
是的，您仍然需要创建一个 html 页面来打印您的 PDF，但是您有 2 个选项:
Yeah, you still need to create a html page to print your PDF, however you have 2 options:
使用相同的页面，通过 CSS 打印样式，您可以显示/隐藏仅在 PDF 上打印的内容(因为 PhantomJs 将在打印模式下创建 PDF).
Use the same page, and via CSS print styles, you can show/hide things that will print only on PDF (as PhantomJs will create PDF in print mode).
创建仅用于 PDF 呈现的自定义网页
Create a custom webpage only for PDF renderization
这篇关于从 chart.js 到 pdf 的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
