隐藏打印部分的svg零件
是否有任何可能在打印版面中隐藏svg的部分。隐藏打印部分的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
}
}]
});
});
});
什么@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>
,并尝试进行打印时,蓝色圆圈将是不可见。
如果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/
这可以解决吗?
完成这个好主意,但不是这个简单的解决方案。尝试在此处添加“缩放控制”,“日期范围控制”和“x轴焦点”的不可打印类。http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/树/主/样本/股票/演示/基本线/ – GreenRover 2013-03-16 13:03:27
@GreenRover,我更新了我的答案,请查看:) – haejeong87 2013-03-18 07:34:35
Thx haejeong,它的工作,但不是真正可靠。已经在:http://jsfiddle.net/DXYne/6/它只适用于元素的一半。请启用/禁用DEBUG_GREEN测试。 – GreenRover 2013-03-18 15:07:49
以上是真实的,但是对于一个办法,不引入新的CSS类,使用Javascript(尽管我喜欢它的话),或运行逻辑:
@media print {
svg circle[fill="blue"] {
display:none;
}
}
希望它能帮助。
好点!隐藏蓝色圆圈很简单,但如果隐藏什么的逻辑变得复杂,CSS将变得复杂。还有一些东西你不能用纯CSS实现,比如隐藏所有放置在水平线下的圆。但是在这个例子中你的解决方案绝对更优雅!谢谢。 – haejeong87 2013-03-15 23:07:42
我认为你仍然可以使用CSS来减少你对布局做的事情。 hr + svg circle [fill = blue]或 .class> svg circle [fill = blue] – Jesse 2013-03-22 08:36:45
@Jesse我的想法正是如此。 OP只想隐藏2-3个元素;更少的代码,更多的啤酒。只是我的观点。 – couzzi 2013-03-22 13:34:56
是的,'display:none; visibility:hidden;'在svg部件的元素,类或ID上。这在媒体的场合= print – 2013-03-15 11:32:52
但是那些元素没有id类。它需要通过javascript – GreenRover 2013-03-15 11:41:37
使用jQuery这可以用[.hide()](http://api.jquery.com/hide/) – 2013-03-15 11:44:10