是否有可能在打印布局中隐藏svg的部分内容。
特别是我喜欢隐藏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
}
}]
});
});
});
答案 0 :(得分:7)
@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;
。
如果在绘制类时无法添加类,请在页面加载后使用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) edge)并相应地调整xMin和xMax。
我把它放在小提琴上:http://jsfiddle.net/DXYne/1/
这可以解决吗?
答案 1 :(得分:2)
以上是正确的,但对于一种不引入新的css类,Javascript(即使我喜欢它)或运行时逻辑的方法:
@media print {
svg circle[fill="blue"] {
display:none;
}
}
希望它有所帮助。