跨多页打印大型Raphael JS图表 [英] Print large Raphael JS chart accross multiple pages

问题描述

我有一张用拉斐尔(Raphael)制作的大图表，希望将其显示在易于打印的页面上.使用较小的图表，即使在IE7(最低要求)下，它也可以正常工作.
但是，如果图表在垂直方向上太长，则不会跨页拆分，而是仅将底部切掉.这在所有浏览器中都会发生.

I have a large chart produced with Raphael, that I want to display in a printer-friendly page. With smaller charts this works beautifully even down to IE7 (min requirement).
But if the chart is too long vertically it doesn't split across pages, instead the bottom is just cut off; this happens in all browsers.

关于如何解决此问题的任何建议?最好不要只是缩小它.

Any suggestions as to how I might solve this problem? Preferably without just making it smaller.

谢谢

推荐答案

要实现的目标是不可能直接实现的. Raphael容器元素标记了overflow:hidden样式，对于将部分页面拆分视为溢出的浏览器来说，很难拆分输出-尤其是在水平溢出的情况下.

What you want to achieve is not directly possible. Raphael container element marks overflow:hidden style and as such for browsers that considers partial page split as overflow, it would be very difficult to split the output - especially if the overflow is horizontal.

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

As a workaround, you may convert Raphael's SVG into canvas by using the canvg JS library. Canvas, being a single raster element, will allow seamless overflow.

您可以看看这个小提琴，在其中我使用 FusionCharts(内部使用Raphael)SVG输出到画布.

You can have a look at this fiddle where I use FusionCharts' (internally using Raphael) SVG to output to a canvas.

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

在上面的代码片段中，我假设您已经有一个ID为myCanvasElementId的canvas元素和一个名为myRaphaelPaper的拉斐尔论文.

In the above code snippet, I assume that you already have a canvas element with id myCanvasElementId and a Raphael paper called myRaphaelPaper.

请参阅我在其中渲染了 Raphael SVG并将其导出到画布的小提琴然后使其仅对CSS打印介质可见.使Raphael元素渲染15英寸乘15英寸以溢出文档.

Refer to this fiddle where I have rendered Raphael SVG and exported it to canvas and then made it visible only for CSS print media. The Raphael element is made to render 15in by 15in to overflow document.

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

Note that this will be limited to modern browsers supporting canvas.

这篇关于跨多页打印大型Raphael JS图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！