代码之家 › 专栏 › 技术社区 › AlexFF1

如何在typescript中打印iframe内容

iframe typescript angular javascript

AlexFF1 · 技术社区 · 7 年前

如何打印所有样式的iframe内容。

我只能得到短信:

阿普茨

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内容?

2 回复 | 直到 7 年前

Fenton 7 年前

这个问题最好这样概括。您似乎可以在帧、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 在同一个域上,以确保跨站点阻止不会阻止此操作。

AlexFF1 7 年前

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

推荐文章

mlsmet · 无法在Android手机上水平滚动表格

3 年前

lord stock · 硒在iframe中引发与下拉菜单相互作用的非接触元素异常

3 年前

ironmantis7x · 我无法使用html更改iframe中文本的文本颜色

3 年前

GÊá´á´á´ÊCá´á´ · 如何预加载或检测CDN承载的视频何时加载到盖茨比的折叠上方?

3 年前

ControlAltDel · 从iframe中加载的html页面上的源脚本获取Javascript变量

3 年前

Soniya Joshi · Android如何在Android iframe webview中传递url?

7 年前

Hellpless · 根据iframe-Google自动播放策略中的allow=“Autoplay”属性激活自动播放

7 年前

rosu alin · Vimeo视频不会在iframe中的chrome上启动。未调用LoadProgress

7 年前

Mahsa · 如何在javascript中获取iframe中链接的坐标

7 年前

Dixon Chaudhary · 在Laravel中维护会话和身份验证

7 年前