从浏览器中仅打印SVG

Question

我正在开发一个基于用户交互动态呈现SVG图形的网页.一旦完成,我希望用户能够仅打印图形 - 不仅仅打印它们驻留在的网页和SVG以及它,而只是打印SVG.此外,理想情况下,打印版本的绘制方式与屏幕浏览器版本略有不同.使用当前的浏览器和SVG,这种事情是否可行？

在Java中,我可以为我的应用程序绘制例程提供绘制引擎或打印引擎,这简单地处理了同样的问题.但是,我是SVG的新手,我无法确定是否存在类似的机制.

Answer 1

你可以使用jQuery.假设您在网页中有一个DIV(svgDiv)中的svg,包括一个调用以下内容的打印按钮,其中根svg具有id = mySVG,以获取宽度/高度,或使用svgDiv宽度/高度.这将打印当前在svg窗口中的视图.

//---print button---
    var printSVG = function()
    {
        var popUpAndPrint = function()
        {
            var container = $('#svgDiv');
            var width = parseFloat(mySVG.getAttribute("width"))
            var height = parseFloat(mySVG.getAttribute("height"))
            var printWindow = window.open('', 'PrintMap',
            'width=' + width + ',height=' + height);
            printWindow.document.writeln($(container).html());
            printWindow.document.close();
            printWindow.print();
            printWindow.close();
        };
        setTimeout(popUpAndPrint, 500);
    };

Answer 2

您可以调用window.print从javascript开始打印过程.

你可以使打印和可见的版本不同使用媒体查询 EG

@media print { different css for print SVG }

如果您不希望打印页面上的现有内容,请使用媒体查询将其设置为display:none或visibility:hidden.