隐藏打印部分的svg零件

Question

是否有任何可能在打印版面中隐藏svg的部分。

Specialy我喜欢隐藏highstock rangeSelector和导航将打印页面。

这应该没有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;为好。

EDITED

如果您不能添加类，他们被吸引时，使用JavaScript页面加载后添加类。

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

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

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

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

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

再次编辑！ :)

我写了这个JS函数（jQuery需要），即添加了“。不可打印”类矩形区域内的所有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 PARAM到true到y轴设置成SVG（意思是x = 0的右边缘处）的右边缘和调整XMIN和相应XMAX

我把这个上小提琴：http://jsfiddle.net/DXYne/1/

这可以解决吗？

Answer 2

以上是真实的，但是对于一个办法，不引入新的CSS类，使用Javascript（尽管我喜欢它的话），或运行逻辑：

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

希望它能帮助。