admin管理员组

文章数量:1414605

How can I print iframe contents with all the styles.

I was able to get the text only:

app.ts

let bodyUrl=".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>

Here is javascript solution: that I found:

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

and use

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

Alternatively try good old

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

How to print iframe content in TypeScript?

How can I print iframe contents with all the styles.

I was able to get the text only:

app.ts

let bodyUrl="https://www.w3schools./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>

Here is javascript solution: that I found:

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

and use

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

Alternatively try good old

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

How to print iframe content in TypeScript?

  • javascript
  • angular
  • typescript
  • iframe
Share Improve this question asked May 30, 2018 at 9:36 AlexFF1AlexFF1 1,2934 gold badges25 silver badges47 bronze badges 2
  • i tried use the javascipt solution I mentioned in my typescript but its not working.. – AlexFF1 Commented May 30, 2018 at 9:41
  • when I do var newWin = window.frames["printf"]; newWin.document.write('<body onload="window.print()">dddd</body>'); newWin.document.close(); I get Cannot read property 'write' of undefined – AlexFF1 Commented May 30, 2018 at 9:52
Add a ment  | 

2 Answers 2

Reset to default 3

The problem is best summed up as this. You seem to be liberally switching between frames, iframes, and windows. You are also referring to window.frames as if it is a map, not an array.

Pick one method and stick to it...

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

Bear in mind that to make this work, it is worth using a src on the same domain to ensure cross-site blocking doesn't prevent this from working.

Another solution might be helpful: This will print the contents of the iframe and the 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();
}

本文标签： javascriptHow to print iframe contents in TypescriptStack Overflow

版权声明：本文标题：javascript - How to print iframe contents in Typescript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745193291a2647016.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。