大きなページを別のページに印刷

Question

ブラウザから大きなSVGチャートを印刷しようとしていますが、SVGチャートはHTMLに埋め込まれています。チャートの幅/高さは絶対値に設定されています。印刷物はSVGチャートの一部しか印刷しませんが、1ページに収まることが多く、残りの部分はカットされます。別のページに印刷するためにチャートを分割する方法はありますか？

Answer 1

これは、SVGを表示するために使用しているブラウザによって異なります。どちらかといえば別のブラウザを試してみてください...サファリには（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から無料のInkscape、または他の多くのアプリケーションを使用して、ハートの内容に操作（または印刷）することができます。

Answer 2

phantomjs.orgプロジェクトを使用して、サーバーでチャート画像を生成します。 URLを使って任意のHTMLページをヘッドレスWebKitマシンに読み込んでPNGにレンダリングすることができます。 さらに、ページの最終的なサイズを取得してから、クリップリージョンを定義することで、ページをサイズに分割することができます。

たとえば、次のサンプルでは、​​ページからファイルシステム内の別々のPNGイメージにいくつかのチャートをエクスポートします。その後、新しいWebページをアセンブルしたり、PDFにパックしたり、ユーザーにダウンロードリンクを提供することができます。これは、Webアプリケーションのための最も信頼性が高く安定した印刷ソリューションです。

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(); 
});