содержание печати <iframe>, превышающее одну страницу - PullRequest
Новая
       50

содержание печати <iframe>, превышающее одну страницу

0 голосов
/ 27 февраля 2019

в моем приложении реагирования у меня есть iframe, который загружен с документом HTML, и его содержание превышает 1 страницу.при нажатии Ctrl+p я хочу напечатать его на нескольких страницах, но при предварительном просмотре печати отображается только одна страница.

как с ней следует обращаться, чтобы распознать, что содержание iframe превышает одну страницу А4?

DOM в Chrome Devtool выглядит как 

<div class="article-container">
  <iframe style="">#document
   /* hundreds of <p> tags */
  </iframe>
</div>

структура в приложении реагирует как 

   <div className="article-container">
      <FrameText content={content} status={!this.state.editStatus} />
   </div>

и FrameText 

class FrameText extends React.Component<Props> {
  iframe: HTMLIFrameElement;
  compinentDidMount(){
    window.addEventListener('beforeprint',(e)=>{console.log(e);})
  }
  /* other stuff*/
  render() {
      const { status } = this.props;
      return <iframe ref={(ref) => (this.iframe = ref!)} style={!status ? { display: 'none' } : {}} />;
  }

такздесь, когда нажата ctrl+p, я получаю событие, и документ iframe находится в событии.Кроме того, у меня есть содержимое iframe и в локальном состоянии.

Я нигде не смог найти, что при срабатывании этого события, что я могу с ним сделать, чтобы манипулировать или как-то сообщать предварительному просмотру печати, что контент длинный,

Кроме того, CSS составляет 

@media print {
  .article-container {
    background-color: white;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
  }
}

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

Мне удалось распечатать несколько страниц в iframe, захватив событие CTRL P, выделив фокус на iframe, а затем запустив печать на iframe. 

<iframe id="iframe" name="iframe" src="2.html"></iframe>


<script src="https://code.jquery.com/jquery.min.js"></script>

<script>

    $(document).bind("keyup keydown", function (e) {
        if (e.ctrlKey && e.keyCode === 80) {
            window.frames["iframe"].focus();
            window.frames["iframe"].print();
            return false;
        }
        return true;
    });

</script>
0 голосов
/ 05 марта 2019

Ваш запрос печатного носителя не будет работать с внутренним содержимым iframe, из-за чего размер iframe игнорируется при печати. ​​Если вы хотите применить определенные стили печати к iframe, то вам нужно ссылаться извне с помощью соответствующего метода (js или html)Я пишу пример для ссылки на стили в iframe, для него могут существовать другие реализации 

let cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);
...