Инициировать событие изменения размера при печати

У меня есть 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 изменяется. Когда я печатаю его, процесс рендеринга не запускает событие изменения размера.


javascript html jquery printing protovis
person Ricardo Marimon    schedule 21.08.2010    source источник
comment
Браузерная поддержка печати (как с точки зрения того, что печатается, так и с точки зрения процесса печати), как правило, в лучшем случае слаба. Мне интересно посмотреть, предложит ли кто-нибудь хороший трюк, но у меня есть сомнения, что то, что вы хотите, вообще возможно.   -  person Pointy    schedule 21.08.2010
comment
В сети ничего не нашел по этому вопросу. Возможно, мне придется изменить размер окна на что-то разумное, а затем распечатать страницу.   -  person Ricardo Marimon    schedule 21.08.2010
comment
ты пробовал это? ‹stackoverflow.com/questions/32345745/›   -  person pixelpalast    schedule 13.02.2018
comment
вы пробовали это ‹stackoverflow.com/questions/32345745/›?   -  person pixelpalast    schedule 13.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вместо того, чтобы изменять свойства диаграммы с помощью события, здесь может помочь правило @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;}
}

При использовании этого метода эти свойства стиля применяются при печати независимо от других внесенных вами изменений.

person PoorlyWrittenCode    schedule 17.05.2018

arrow_upward
0
arrow_downward

возможно

<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>
person mplungjan    schedule 21.08.2010
comment
Я долго проверял, но в целом это не сработало. Он работает только в хроме и не требует изменения высоты или ширины. - person Ricardo Marimon; 01.09.2010
comment
отклонено, потому что это не отвечает на вопрос (как вызвать событие resize) - person adamdport; 07.08.2017
comment
@adamdport ах, вы имеете в виду, что ответ на проблему X / Y с предложением, которое отвечает на основную проблему, заслуживает отрицательного голоса? Ну хоть удосужился прокомментировать голосование... - person mplungjan; 07.08.2017
comment
@adamdport PS: 2010 - действительно нужно посещать такие старые посты и голосовать за них? - person mplungjan; 07.08.2017