在打印时触发调整大小事件答案

【问题标题】：Trigger resize event on print在打印时触发调整大小事件
【发布时间】：2011-04-02 01:58:54
【问题描述】：

我有一个 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 的内容会发生变化。当我打印它时，渲染过程不会触发调整大小事件。

【问题讨论】：

浏览器对打印的支持（无论是在打印的内容方面，还是在进行打印的过程方面）通常充其量都是薄弱的。我很想看看是否有人提出一个好的技巧，但我怀疑你想要的通常是可能的。
无法在网上找到有关此问题的任何信息。我可能需要将窗口大小调整为合理的大小，然后打印页面。
你试过了吗？ stackoverflow.com/questions/32345745/…>
你试过这个stackoverflow.com/questions/32345745/…>吗？

标签： javascript jquery html printing protovis

【解决方案1】：

也许

<style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>

<style type="text/css" media="print">
      #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
</style>

【讨论】：

我花了很长时间才检查，但总的来说没有用。它仅适用于 chrome，并且不会改变高度或宽度。
投了反对票，因为这没有回答问题（如何触发resize 事件）
@adamdport 啊，您的意思是回答 X/Y 问题并提出一个可以回答潜在问题的建议值得一票否决？好吧，至少你打扰评论投票......
@adamdport PS：2010 - 真的需要访问这些旧帖子并投反对票吗？

【解决方案2】：

@media print css 规则在这里可能会有所帮助，而不是使用事件来改变图表属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/%40media

@media print{
  #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}

使用此方法，这些样式属性将应用于打印，无论您进行了哪些其他更改。

【讨论】：