javascript - 跨多个页面打印大型 Raphael JS 图表

Question

我有一个用 Raphael 制作的大图表，我想在一个便于打印的页面中显示。对于较小的图表，即使在 IE7（最低要求）下也能很好地工作。
但是，如果图表垂直太长，它不会跨页拆分，而是将底部截断；这发生在所有浏览器中。

关于我如何解决这个问题的任何建议？最好不要让它变小。

谢谢

Answer 1

您想要实现的目标是不可能直接实现的。Raphael 容器元素标记overflow:hidden样式，因此对于将部分页面拆分为溢出的浏览器，拆分输出将非常困难 - 特别是如果溢出是水平的。

作为一种解决方法，您可以使用canvg JS 库将 Raphael 的 SVG 转换为画布。画布作为单个光栅元素，将允许无缝溢出。

您可以看一下我使用FusionCharts（内部使用 Raphael）SVG 输出到 canvas的这个小提琴。

canvg("myCanvasElementId", myRaphaelPaper.canvas.parentNode.innerHTML);

在上面的代码片段中，我假设您已经有一个带有 id 的 canvas 元素myCanvasElementId和一个名为myRaphaelPaper.

请参阅this fiddle，我在其中渲染了Raphael SVG 并将其导出到画布，然后使其仅对 CSS 打印媒体可见。Raphael 元素用于渲染 15 英寸乘 15 英寸以溢出文档。

请注意，这将仅限于支持画布的现代浏览器。