我使用多个iframe构建了我的数据的可打印版本,以显示订单项详细信息。但是,如果我的任何iframe内容大于一页,它们在打印时会被切断(它们在屏幕上显示的很好)。我所有的iframe指向相同的域,我使用浏览器的文件 - >打印功能来完成我的打印。我不认为这是一个浏览器特定的错误,因为我在IE & FF中得到了相同的结果。如何打印iframe?
如何打印包含多个iframe的HTML文档需要做些什么?
我使用多个iframe构建了我的数据的可打印版本,以显示订单项详细信息。但是,如果我的任何iframe内容大于一页,它们在打印时会被切断(它们在屏幕上显示的很好)。我所有的iframe指向相同的域,我使用浏览器的文件 - >打印功能来完成我的打印。我不认为这是一个浏览器特定的错误,因为我在IE & FF中得到了相同的结果。如何打印iframe?
如何打印包含多个iframe的HTML文档需要做些什么?
我找到了答案here。虽然不太理想,但它会允许我先打印主记录,然后通过单独打印每个iframe将每个行项目打印为单独的打印作业。
我不相信有这样做的简单方法。如果他们都在同一个域中,为什么使用IFRAME?为什么不直接将数据放在页面中?如果你正在寻找滚动,div
与height: ###px; overflow: auto;
将允许它,而不必使用IFRAMEs和CSS打印样式表将允许您在用户打印时取消溢出/高度CSS。
在你的CSS底部试试下面的(只是猜测):
@media print {
iframe {
overflow: visible;
}
}
IFRAME不会像那样溢出。他们有一个高度和宽度。 – ceejayoz 2010-02-16 02:36:32
根据浏览器引擎,这个问题有不同的答案。为了以简单的跨浏览器方式解决这些问题,我创建了https://github.com/noderaider/print。
我提供了两个NPM包:
通过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()
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>
)
}
}
每个行项目中的HTML有它自己的脚本和不保证跨多个行项目唯一的ID。试图将它们放在一个页面上将导致命名空间问题和脚本显示/隐藏它们不应该的字段。 – 2010-02-16 15:01:42
听起来就像你已经得到了自己的应用程序设计问题,然后。 – ceejayoz 2010-02-16 16:13:50
不,我还有一个浏览器不打印它在屏幕上显示的问题。 – 2010-02-17 17:25:42