首页 文章

打印时触发调整大小事件

提问于
浏览 次
11

我有一个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事件 .

javascript jquery html printing protovis

2 回答

  • 0

    @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;}
}

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

    回复于
  • 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>
    回复于

相关问题