打印时触发调整大小事件
我有一个 div，在其中使用 protovis 创建图表。 div 具有 width: 100% 和 height: 100% 并且创建图表的代码使用 $('#chart').width() 和 $('#chart').height() 在渲染时获取 div 的大小并用图表填充页面。我捕获窗口上的调整大小事件并调整 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 的内容会发生变化。当我打印它时，渲染进程不会触发调整大小事件。
I have a div in which I create a chart using protovis. The div has width: 100% and height: 100% and the code to create the chart uses $('#chart').width() and $('#chart').height() to get the size of the div at render time and fill the page with the chart. I capture the resize event on the window and adjust the div and the chart so that it resizes when the window resizes.
Now I need to print. I would have hoped that when the browser is rendering the page for the printer it issues a resize but it doesn't, at least Safari and Firefox don't. Chrome does something strange in which it resizes only the height but not the width. Is there a way to trigger this behavior just before print?
EDIT. Consider the following 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>
When I resize the window the content of the div changes. When I print it the render process does not fire the resize event.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
@media printcss 规则可能会有所帮助，而不是通过事件改变图表属性。 https://developer.mozilla.org/en-US/docs /Web/CSS/%40media使用此方法，无论您进行了哪些其他更改，这些样式属性都会应用于打印。
Rather than mutating the chart properties with an event, the
@media printcss rule might help here. https://developer.mozilla.org/en-US/docs/Web/CSS/%40mediaWith this method, these style properties are applied on print, regardless what other changes you've made.