如何在Typescript中打印iframe内容

Question

如何打印所有样式的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();

如何在TypeScript中打印iframe内容？

Answer 1

最好将问题总结如下。 您似乎在框架，iframe和窗口之间自由切换。 您还引用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 ，以确保跨站点阻止不会阻止此工作。

Answer 2

另一个解决方案可能会有所帮助：这将打印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();
}

如何在Typescript中打印iframe内容

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-05-30 10:03:11

解决方案2
0 2018-05-31 16:14:00

如何在Typescript中打印iframe内容

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-05-30 10:03:11

解决方案2 0 2018-05-31 16:14:00

解决方案1
1 已采纳 2018-05-30 10:03:11

解决方案2
0 2018-05-31 16:14:00