Как напечатать содержимое iframe в Typescript - PullRequest
Новая
       3

Как напечатать содержимое iframe в Typescript

0 голосов
/ 30 мая 2018

Как распечатать содержимое iframe со всеми стилями.

Мне удалось получить только текст:

app.ts 

let bodyUrl="https://www.w3schools.com/tags/tag_iframe.asp"


print(){

   let printContents, popupWin;
   printContents = document.getElementById('iframe');
   var innerDoc = printContents.contentDocument || printContents.contentWindow.document; 
   let printBody = innerDoc.body.innerText //got the text
                                           //get whole iframe body with styles for print?

popupWin = window.open('', '_blank', 'top=0,left=0, width=900,height=700');
popupWin.document.open();
popupWin.document.write(`
  <html>
    <head>
      <title>My Print</title>
      <style>
      @media print{
        .doNotPrint{
          display:none;!important
         }
      }
      </style>
    </head>
<body onload="window.print();window.close()">
${printBody}

</body>
  </html>`
);
popupWin.document.close();

 }

html 

<iframe id="iframe" class="iframe-content" [src]="bodyUrl"></iframe>

Вот решение javascript, которое я нашел: 

      window.frames["printf"].focus();
      window.frames["printf"].print();

и используйте 

      <iframe id="printf" name="printf"></iframe>

В качестве альтернативы попробуйте старый добрый 

      var newWin = window.frames["printf"];
      newWin.document.write('<body onload="window.print()">dddd</body>');
      newWin.document.close();

Какпечатать содержимое iframe в TypeScript?

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Может быть полезно другое решение: при этом будет напечатано содержимое iframe и html.

html 

   <iframe id="iframe" class="iframe-content" [src]="bodyUrl"></iframe>

   <div id="print-section">
     <h2>Print me too</h2>
   </div>

ts. 

print() {


   let frame
   let frameBody

   frame = document.getElementById('iframe')

   frameBody = frame.contentWindow.document.documentElement.outerHTML; //will get all html within the iframe


   let printContents, popupWin;

   let printHeader = document.getElementById('print-section').innerHTML; //will get html of the div by id

   popupWin = window.open('', '_blank', 'top=0,left=0, width=900,height=700');
   popupWin.document.open();
   popupWin.document.write(`
    <html>
      <head>
      <title>Print Preview</title>
      <style>
       @media print{
         .doNotPrint{
           display:none;!important
          }
         .printVisible{
           visability: content;
         }
         .print-header{
           font-size: 14px;
           font-weight: bold;
           min-width: 100px;
         }
        .print-cont{
        }
        .print-header-wrapper{
          padding-bottom: 50px
        }
      }
       </style>
      </head>
   <body onload="window.print();window.close()">
  ${printHeader}
  ${frameBody}
     </body>
     </html>`
   );
  popupWin.document.close();
}
0 голосов
/ 30 мая 2018

Проблема лучше всего описана следующим образом.Похоже, вы свободно переключаетесь между фреймами, фреймами и окнами.Вы также ссылаетесь на window.frames как на карту, а не на массив.

Выберите один метод и придерживайтесь его ... 

document.getElementById('iframe');
iframe.contentWindow.document.write('<p>This is some content</p><script>window.print();</' + 'script>');
<iframe id="iframe" src="/blank.html"></iframe>

Имейте в виду, что для этой работы стоит использовать src в том же домене, чтобы межсайтовая блокировка не помешала этому.с работы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...