不使用React的用法

Question

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

打印包含多个iframe的HTML文档需要做什么？

Answer 1

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

Answer 2

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

Answer 3

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

我提供两个npm套餐：

print-utils - 通用JavaScript库
react-focus - 反应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>
    )
  }
}

Answer 4

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

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

如何打印iframe？

4 个答案:

不使用React的用法

使用React