Ric*_*mon 12 html javascript printing jquery protovis
我有一个div,我使用protovis创建一个图表.div有width: 100%和,height: 100%并且创建图表的代码使用$('#chart').width()和$('#chart').height()在渲染时获取div的大小,并用图表填充页面.我在窗口上捕获resize事件并调整div和图表,以便在窗口调整大小时调整大小.
现在我需要打印.我希望当浏览器呈现打印机的页面时,它会发出调整大小,但它不会,至少Safari和Firefox不会.Chrome做了一些奇怪的事情,它只调整高度但不调整宽度.有没有办法在打印之前触发此行为？
编辑.考虑以下html
<html>
<head>
<title>Resize</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chart').resize(function() {
$(this).html('chart size is ' + $('#chart').width() + ' x ' + $('#chart').height());
})
});
$(window).resize(function() {
$('.resizable').resize();
});
</script>
<style type="text/css">
#chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>
</head>
<body>
<div id="chart" class="resizable">
</div>
</body>
</html>
当我调整窗口大小时,div的内容会发生变化.当我打印它时,渲染过程不会触发resize事件.
小智 1
@media printCSS 规则可能会有所帮助，而不是通过事件来改变图表属性。https://developer.mozilla.org/en-US/docs/Web/CSS/%40media
@media print{
#chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}
使用此方法，无论您进行了哪些其他更改，这些样式属性都会应用于打印。