Распечатать большой SVG-график на отдельных страницах - PullRequest
1 голос
/ 30 июля 2011

Я пытаюсь распечатать большую диаграмму SVG из браузера, диаграмма SVG встроена в HTML.Ширина / высота графика установлена ​​на абсолютное значение.Печать печатает только часть диаграммы SVG, однако большая часть помещается на 1 странице, а остальная часть обрезается.Есть ли способ разбить график для печати на отдельные страницы?

Ответы [ 2 ]

0 голосов
/ 12 января 2013

Используйте проект phantomjs.org для генерации изображений ваших диаграмм на сервере. Это позволяет загружать любую HTML-страницу по URL в безголовый компьютер 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();
});
0 голосов
/ 30 июля 2011

Это полностью зависит от того, какой браузер вы используете для просмотра SVG. Или попробуйте другой браузер ... Safari имеет БОЛЬШИЕ возможности печати (по крайней мере, на Mac) .. или ... "изолируйте" SVG. Или посмотрите на источник и выясните относительный URL-адрес для встроенного SVG и введите это в адресной строке ..

<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 , или МНОГИХ, многих других, чтобы манипулировать (или распечатывать) его для вашего сердца.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...