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

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

来源

2010-02-15 William Jens

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

来源

2010-02-17 17:27:55

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

来源

2010-02-15 23:23:39 ceejayoz

每个行项目中的HTML有它自己的脚本和不保证跨多个行项目唯一的ID。试图将它们放在一个页面上将导致命名空间问题和脚本显示/隐藏它们不应该的字段。 – 2010-02-16 15:01:42

听起来就像你已经得到了自己的应用程序设计问题，然后。 – ceejayoz 2010-02-16 16:13:50

不，我还有一个浏览器不打印它在屏幕上显示的问题。 – 2010-02-17 17:25:42

-1

在你的CSS底部试试下面的（只是猜测）：

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

来源

2010-02-15 23:27:56 Anthony

IFRAME不会像那样溢出。他们有一个高度和宽度。 – ceejayoz 2010-02-16 02:36:32

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

我提供了两个NPM包：

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

用法不作出反应

通过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> 
    ) 
    } 
}

来源

2016-11-07 15:42:52 cchamberlain

如何打印iframe？

回答

用法不作出反应

用法与之反应

相关问题