javascript - 如何在 Typescript 中打印 iframe 内容

标签 javascript angular typescript iframe

如何打印所有样式的 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 内容?

最佳答案

这个问题最好总结如下。您似乎可以在框架、iframe 和窗口之间自由切换。您还将 window.frames 视为 map ,而不是数组。

选择一种方法并坚持下去...

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 以确保跨站点阻止不会阻止此功能的工作。

关于javascript - 如何在 Typescript 中打印 iframe 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50601283/

相关文章:

angular - Akita Observable OnCompleted 从不触发

android - 如何在设备上运行时加快 Ionic 2 应用程序的启动时间

typescript - <AG-Grid> 类型 'children' 上不存在属性 'ColDef<object>'

javascript - 使用 AngularJS 中的链接覆盖单击表

javascript - 基于其他 DOM 元素在 ng-style 中使用变量

javascript - Ionic 3 在构建时更改变量/主题

node.js - 如何在开发模式下使用 TypeScript 和 ts-node 在 NodeJS 应用程序中导入文本文件?

javascript - 使用 Parse 通过 Mailgun 发送电子邮件

PRIME ng 确认服务的 Angular 单元测试

html - Angular:在同一个按钮上使用(单击)和 routerLink