Javascript 打印时隐藏svg部件

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

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

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

是否可以使用css media=print显示/隐藏元素，并使用jquery绑定此事件

需要隐藏在打印布局上的黄色部分：

对于此示例：

$(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
                }
            }]
        });
    });

});

什么是@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> 

---------------- 再次编辑！：） 我编写了这个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');
};

如果需要隐藏右对齐的内容，请将

rightalined

参数设置为

true

以将y轴设置为svg的右边缘（表示右边缘的x=0），并相应地调整xMin和xMax

我把这个放在小提琴上：

---

这是一个解决方案吗？

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

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

---

希望能有帮助

是，

显示：无；可见性：隐藏。这在media=print中是不正确的，但是这些元素没有id类。它需要通过JavaScriptWithjQuery来完成，这一点很好！像隐藏蓝色圆圈这样简单的事情很容易，但如果隐藏内容的逻辑变得复杂，CSS也会变得同样复杂。还有一些事情是使用纯CSS无法实现的，比如隐藏水平线下的所有圆。但在本例中，您的解决方案肯定更优雅！谢谢。我想你还是可以少用CSS，因为你的布局真的很疯狂。hr+svg圆圈[fill=blue]或.class>svg圆圈[fill=blue]@Jesse我的想法正是如此。OP只想隐藏2-3个元素；代码越少，啤酒就越多。只是我的意见。好主意，但不是这么容易解决的。尝试在这里为“缩放控制”、“日期范围控制”和“x轴焦点”Thx haejeong添加不可打印类，它可以工作，但并不可靠。Have alook at:它只对一半的元素有效。请启用/禁用测试的调试绿色。实际上，由于复杂的更新，我做了我试图避免的事情。我已经修补了highstock类。我直接添加了css类。对于“缩放控件”和“日期范围控件”的大多数控件，它工作正常。实际上，只剩下日期范围最小值图表。
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

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