在打印时触发调整大小事件 [英] Trigger resize event on print
问题描述
我有一个使用 protovis 创建图表的div。 div有 现在我需要打印。我希望当浏览器呈现打印机的页面时，它会发出一个调整大小，但它不会，至少Safari和Firefox不会。 Chrome会做一些奇怪的事情，只调整高度而不调整宽度。有没有办法在打印之前触发这种行为？ 编辑。考虑以下html 在调整窗口大小时，div的内容会发生变化。当我打印它时，渲染过程不会触发resize事件。 与使用事件变更图表属性不同， 使用此方法，将应用这些样式属性无论你做了哪些其他修改。 I have a div in which I create a chart using protovis. The div has 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 When I resize the window the content of the div changes. When I print it the render process does not fire the resize event. Rather than mutating the chart properties with an event, the With this method, these style properties are applied on print, regardless what other changes you've made. 这篇关于在打印时触发调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ width：100％和 height：100％并且创建图表的代码使用 $（'＃chart'）。width（）和 $（'＃chart'）。height（）呈现时间的div，并用图表填充页面。我在窗口捕获resize事件并调整div和图表，以便在窗口调整大小时调整它。
< html>
< head>
< title>调整大小< / title>
< script type =text / javascriptsrc =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％;身高：100％;背景：灰色; border：1px solid black;}
< / style>
< / head>
< body>
< div id =chartclass =resizable>
< / div>
< / body>
< / html>
@media print css规则可能有帮助。 https://developer.mozilla.org/en-US/docs / web / CSS /％40media
@media print {
#chart {width：100％ ;身高：98％;背景：灰色; border：1px solid black;}
}
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. <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>
@media print css rule might help here. https://developer.mozilla.org/en-US/docs/Web/CSS/%40media@media print{
#chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}
