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

在iframe中将两个contentwindows打印为一个

dojo printing iframe html javascript

jimgug · 技术社区 · 5 年前

我有一个包含多个iframe的网页,例如6 我希望能够在一次调用中打印其中两个帧,而不是抓取每个帧的内容窗口,然后调用:

parent.iFrame1.focus();
parent.iFrame1.print();
parent.iFrame2.focus();
parent.iFrame2.print();

当它在浏览器中的两个单独的打印预览窗口中打印内容时。

我尝试了下面的方法,但没有一个能真正告诉我我在寻找什么或为我工作(即内容被截断)

有可能吗?还是我在打一匹死马?

我也试过从iframes中获取html并将其写入一个新文档,但感觉这有点笨手笨脚。此外,还需要合并多个css和脚本文件等,以呈现一个内聚页面。

任何答案都将不胜感激!

我尝试过的潜在解决方案目前还没有奏效:

Wait for html to write to window before calling window.print()

Print preview from multiple iframes?

https://graciesdad.wordpress.com/2007/04/19/all-in-one-printing-from-multiple-iframes/

Javascript Print iframe contents only

1 回复 | 直到 5 年前

customcommander 5 年前

我会用另一个iframe来做这项工作。那个傻瓜 必须是 但在同一个领域。

在你的主页上 (例如mydomain/index.html)

<html>
  <head>
    <style>
      .print {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
      <script>
        function printIframes(urls) {
          var iframe = document.createElement('iframe');
          iframe.className = "print";
          iframe.src = `print.html?urls=${encodeURIComponent(urls.join(','))}`;
          iframe.onload = function () {
            this.contentWindow.focus();
            this.contentWindow.print();
          };
          document.body.appendChild(iframe);
        }
      </script>
    </body>
</html>

这个 printIframes() 函数接受要打印的外部页的URL数组。它创建一个“不可见”iframe(请参见 .iframe css类)加载 print.html 在查询字符串中包含以下URL:

<iframe src="print.html?urls=http://example.com,http://example.com"></iframe>

如果你直接访问iframe,你会看到:

在print.html中 例如mydomain/print.html

此页解码 urls 查询字符串并为每个要加载的URL创建一个iframe。

<html>
    <body>
        <script>
          var urls = document.location.search.split('=')[1];
          urls = decodeURIComponent(urls);
          urls = urls.split(',');
          urls.forEach(url => {
            var iframe = document.createElement('iframe');
            iframe.src = url;
            document.body.appendChild(iframe)
          });
        </script>
    </body>
</html>

例子

在这个截图中,我加载主页(index.html),在开发人员控制台中,我调用 printiframes() 函数:(实际上你不会看到它们)

然后紧接着请求打印该iframe的内容。