【问题标题】：How does one print iframes?如何打印 iframe？
【发布时间】：2010-02-15 23:11:27
【问题描述】：

我使用多个 iframe 构建了我的数据的可打印版本来显示订单项详细信息。但是，如果我的任何 iframe 内容大于页面，它们会在打印时被截断（它们在屏幕上显示良好）。我所有的 iframe 都指向同一个域，我正在使用浏览器的 File->Print 功能进行打印。我不认为这是特定于浏览器的错误，因为我在 IE 和 FF 中得到了相同的结果。

如何打印包含多个 iframe 的 HTML 文档？

【问题讨论】：

标签： html iframe printing

【解决方案1】：

我不相信有一种简单的方法可以做到这一点。如果它们都在同一个域上，为什么要使用 IFRAME？为什么不直接把数据放到页面里呢？如果您正在寻找滚动，div 和 height: ###px; overflow: auto; 将允许它无需使用 IFRAME，而 CSS 打印样式表将允许您在用户点击打印时关闭溢出/高度 CSS。

【讨论】：

每个订单项中的 HTML 都有自己的脚本和 ID，不能保证在多个订单项中是唯一的。试图将它们放在一个页面上会导致命名空间问题和脚本显示/隐藏它们不应该显示/隐藏的字段。
听起来您自己遇到了应用程序设计问题。
不行，我还有一个浏览器不打印屏幕显示的问题。
应用程序设计阻止您以可打印格式显示页面。
没错，我并不是要发动一场激烈的战争，但我的意思是，一个可以在屏幕上显示内容但不能正确打印的网络浏览器是我真正的问题。不管怎样，我想我有办法解决。

【解决方案2】：

我找到了答案here。虽然不太理想，但它允许我先打印主记录，然后通过单独打印每个 iframe 来选择将每个行项目打印为单独的打印作业。

【讨论】：

【解决方案3】：

根据浏览器引擎的不同，这个问题有不同的答案。为了以一种简单的跨浏览器方式解决这些问题，我创建了https://github.com/noderaider/print。

我提供两个 npm 包：

print-utils - 通用 JavaScript 库
react-focus - React iframe 组件

在没有 React 的情况下使用

通过npm安装：

npm i -S print-utils

HTML：

<iframe id="print-content" src="/frame.html"></iframe>

JavaScript (ES2015)

import { usePrintFrame } from 'print-utils'

/** Start cross browser print frame */
const disposePrintFrame = usePrintFrame(document.getElementById('print-frame'))

/** Stop using print frame */
disposePrintFrame()

与 React 一起使用

npm i -S react-focus

用法：

import React, { Component } from 'react'
import reactFocus from 'react-focus'

/** Create Focus Component */
const Focus = reactFocus(React)

/**
 * Use the component within your application just like an iframe
 * it will automatically be printable across all major browsers (IE10+)
 */
export default class App extends Component {
  render() {
    return (
      <div>
        <div>
          <h2>Welcome to react-focus</h2>
        </div>
        <div>
          <Focus src={`?d=${Date.now()}`} />
        </div>
      </div>
    )
  }
}

【讨论】：

【解决方案4】：

在您的 CSS 底部尝试以下（只是猜测）：

@media print {
    iframe {
       overflow: visible;
    }
}

【讨论】：

IFRAME 不会那样溢出。它们有固定的高度和宽度。