在單獨的頁面上打印大型SVG圖表

我想從瀏覽器中打印大型SVG圖表，SVG圖表嵌入到HTML中。圖表的寬度/高度設置爲絕對值。打印僅打印SVG圖表的一部分，但是可以打印1頁，並將其餘部分截斷。有沒有辦法將圖表分割成單獨的頁面？在單獨的頁面上打印大型SVG圖表

2011-07-30 Han Gao

這完全取決於您使用什麼瀏覽器來查看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到免費的Inkscape或許多其他許多應用程序來操縱（或打印）它到您的心中。

來源

2011-07-30 01:18:17

我能做些什麼來改變SVG代碼，使它在單獨的頁面上打印IE7？ –

是的，我給你的指示是普遍的。「查看源代碼」，你會看到，SVG只不過是一串文字，以''如果你不願意提取它們並用一個不太蹩腳的作品打印軟件，我相信有很多不同的方法可以通過免費或Adobe PDF插件，微軟XPS或任何它所謂的「打印」IE7，或者只是一個屏幕截圖，並打印！但不管你做什麼，不要忘記把我的答案標記爲解決方案。這是真正重要的，哈哈。 J/K。 –

謝謝亞歷克斯。最後一個問題，我需要對SVG代碼進行哪些更改才能打開圖表進行打印？我可以只添加普通的HTML onBeforePrint標籤並在JS中調用它來添加分頁符？或者是否有一些獨特的svg代碼將打印出來？ –

使用phantomjs.org項目在服務器上生成圖表圖像。它允許通過URL將任何HTML頁面加載到無頭WebKit機器並將其呈現爲PNG。另外，您可以獲取頁面的最終大小，然後通過循環中定義剪輯區域將其剪切爲紙片。

例如，下一個示例將多個圖表從頁面導出到文件系統中的單獨PNG圖像。之後，您可以組裝新的網頁或將其打包成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(); 
});

來源

2013-01-11 21:01:22

在單獨的頁面上打印大型SVG圖表

回答

相關問題