仅从浏览器打印SVG

Question

我正在开发一个基于用户交互动态渲染SVG图形的网页。一旦完成，我希望用户能够打印图形只-而不是简单地打印他们所在的网页和SVG连同它，但只是SVG。此外，理想情况下，打印版本的绘制方式与屏幕上的浏览器版本略有不同。在当前的浏览器和SVG中，这种事情是可能的吗？

在Java中，我可以为我的应用程序绘图例程提供一个绘图引擎或打印引擎，这可以简单地处理相同的问题。然而，我是SVG的新手，我不能确定是否存在类似的机制。

Answer 1

您可以调用window.print从javascript启动打印过程。

您可以使用media queries使打印版本和可见版本有所不同。

@media print { different css for print SVG }

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

Answer 2

您可以使用jQuery。假设您的svg在网页中的DIV( svgDiv )中，包括一个打印按钮，该按钮调用以下内容，其中根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);
    };