在单独的页面上打印大型 SVG 图表

Question

我正在尝试从浏览器打印大型 SVG 图表，SVG 图表嵌入到 HTML 中。图表的宽度/高度设置为绝对。打印仅打印 SVG 图表的一部分（无论一页能容纳多少内容），并剪掉其余部分。有没有办法将图表拆分为单独的页面打印？

Answer 1

这完全取决于您使用什么浏览器来查看 SVG。要么尝试不同的浏览器... Safari 具有出色的打印功能（至少在 Mac 上）.. 要么...“隔离”SVG.. 要么查看源代码并找出嵌入的 SVG 的相对 URL，然后输入将其粘贴到 URL 栏中。

<td><object id="object" type="image/svg+xml" data="**smiley.svg**">Please use a modern browser!</object></td>
<td><iframe id="iframe" src="**smiley.svg**">Please use a modern browser!</iframe></td>
<td><embed id="embed" src="**smiley.svg**" type="image/svg+xml" /></td>
<td><img id="img" alt="smiley face" src="**smiley.svg**" /></td>

或者从内联源中复制并粘贴实际的 SVG 代码，并将其粘贴到扩展名为 .svg 的纯文本文档中...

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>

然后您可以使用多种应用程序，从 Illustrator 到免费的<一href="http://inkscape.org/" rel="nofollow">Inkscape，或者很多很多其他的可以根据你的喜好操作（或打印）它。

Answer 2

使用 phantomjs.org 项目在服务器上生成图表图像。
它允许通过 URL 将任何 HTML 页面加载到无头 WebKit 机器中并将其渲染为 PNG。
另外，您可以获得页面的最终尺寸，然后通过循环定义剪辑区域将其切成和平片。

例如，下一个示例将页面中的多个图表导出到文件系统中的单独 PNG 图像中。之后，您可以组装新网页或将其打包为 PDF 并向您的用户提供下载链接。这将是最可靠、最稳定的网络应用打印解决方案。

var page = require('webpage').create();
page.viewportSize = { width: 1280, height : 1024 };
page.open('http://chart.html', function () {
    page.clipRect = page.evaluate(function () {
        var chart = jQuery("#chart1");
        return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };  
    });
    page.render('chart1.png');
    page.clipRect = page.evaluate(function () {
        var chart = jQuery("#chart2");
        return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };  
    });
    page.render('chart2.png');    
    page.clipRect = page.evaluate(function () {
        var chart = jQuery("#chart3");
        return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };  
    });
    page.render('chart3.png');        
    phantom.exit();
});