dojo 在一个iFrame中将两个contentWindows作为一个内容打印

mmvthczy 于 2022-12-08 发布在 Dojo

关注(0)|答案(1)|浏览(130)

我有一个网页有多个iFrame，例如6，我希望能够打印2这些帧作为一个调用，而不是抓取每个帧的contentWindow，然后调用：

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

dojo

来源：https://stackoverflow.com/questions/53456976/print-two-contentwindows-as-one-within-an-iframe

1条答案

按热度按时间

oxf4rvwz1#

我会使用另一个iframe来完成这项工作。但那个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()函数：（您实际上不会看到它们）