在打印时隐藏 svg 部分

Question

是否有可能在打印布局中隐藏部分 svg。

我特别喜欢隐藏 highstock rangeSelector 和 navigator 将打印页面。

这应该在没有 js triggert 按钮的情况下工作。 它应该在使用浏览器打印按钮时工作。

是否有可能使用 css media=print 显示/隐藏元素并将此事件与 jquery 绑定？

需要隐藏在打印布局的黄色部分： http://i49.tinypic.com/24mbxop.png

对于这个例子：

$(function() {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

Answer 1

@Bondye 说了什么。

创建一个类似的类

@media print {
    .unprintable {
        visibility: hidden;
    }
}

并将类应用于您不想打印的 svg 元素

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50"  cy="50"  r="40" fill="red" />
   <circle cx="150" cy="50"  r="40" fill="red" />
   <circle cx="50"  cy="150" r="40" fill="blue" class="unprintable" />
   <circle cx="150" cy="150" r="40" fill="red" />
</svg> 

而你尝试打印，蓝色圆圈将不可见。

http://jsfiddle.net/EqDGQ/

如果visibility: hidden; 不适合您，请尝试display: none;。

已编辑

如果在绘制时无法添加类，请在页面加载后使用 Javascript 添加该类。

您不能使用 hide()，因为它也会从屏幕上删除元素。您必须打开一个新选项卡/窗口并调用 hide()，但正如问题中提到的，用户可以使用浏览器菜单进行打印。然后，您就没有机会打开新标签/窗口并调用 hide() 。

因此，您必须在页面加载时添加 .unprintable 类。然后，屏幕上会显示所有内容，但在打印时，不会打印 .unprintable 元素。

如果你发布一个网站链接，并告诉我你想隐藏什么，我可以帮你写 JS 代码，但它会是这样的：http://jsfiddle.net/EqDGQ/1/

$(function() {
    $('svg circle[fill="blue"]').attr('class', 'unprintable');
});

----------------

再次编辑！ :)

我编写了这个 JS 函数（需要 jQuery），它将“.unprintable”类添加到矩形区域内的所有 svg 元素中：

setUnprintableArea = function(id, xMin, yMin, xMax, yMax, rightAligned) {
    if (rightAligned) {
        svgWidth = $('#'+id+' .highcharts-container svg')[0].getBoundingClientRect().width;
        xMin += svgWidth;
        xMax += svgWidth;
    }
    $('#'+id+' .highcharts-container svg *').filter(function() {
        rect = this.getBoundingClientRect();
        return (xMin <= rect.left && rect.right  <= xMax &&
                yMin <= rect.top  && rect.bottom <= yMax);
    }).attr('class', 'unprintable');
};

你可以这样调用这个函数：

setUnprintableArea('container', 15, 45, 240, 70); // Zoom
setUnprintableArea('container', -55, 15, 0, 40, true); // Top-right Buttons
setUnprintableArea('container', 0, 430, Number.MAX_VALUE, Number.MAX_VALUE); // Horiz Scroll Bar

如果您需要隐藏右对齐的内容，请将 rightAligned 参数设置为 true 以将 y 轴设置为 svg 的右边缘（即右边缘的 x=0）并调整相应的 xMin 和 xMax。

我把它放在小提琴上：http://jsfiddle.net/DXYne/1/

这可以解决吗？

Answer 2

以上是正确的，但是对于不引入新的 css 类、Javascript（尽管我很喜欢它）或运行时逻辑的方法：

@media print {
    svg circle[fill="blue"] { 
       display:none; 
    }
}

希望对您有所帮助。