在多个页面上打印大型Raphael JS图表

Question

我有一张用Raphael制作的大图表，我希望在打印机友好的页面中显示。使用较小的图表，这甚至可以达到IE7（最低要求） 但如果图表垂直太长则不会分页，而是底部被切断;这种情况发生在所有浏览器

有关如何解决此问题的任何建议？最好不要让它变小。

由于

Answer 1

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

作为一种解决方法，您可以使用canvg JS library将Raphael的SVG转换为画布。 Canvas是一个单一的栅格元素，可以实现无缝溢出。

您可以使用FusionCharts' (internally using Raphael) SVG to output to a canvas来查看这个小提琴。

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

在上面的代码片段中，我假设您已经有一个标识为myCanvasElementId的canvas元素和一个名为myRaphaelPaper的Raphael文件。

请参阅此小提琴，其中我已渲染Raphael SVG and exported it to canvas，然后仅对CSS打印介质可见。拉斐尔元素用于渲染15英寸乘15英寸溢出文档。

  

    

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