图表从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将chart.js导出为PDF(无头浏览器，它将打开包含图表的html页面，并通过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，但是您有两种选择:

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屋！