在我的react应用程序中,我有一个 iframe
,其中已加载HTML文档,其内容超过了一页。在按 Ctrl + p
时,我想将其打印成几页,但打印预览仅显示一页。
应如何处理以识别 iframe
的内容不止一张A4页面?
chrome devtool中的DOM看起来像
react应用中的结构类似于
和FrameText
Class FrameText扩展了React.Component {
iframe:HTMLIFrameElement;
compinentDidMount(){
window.addEventListener('beforeprint',(e)=> {console.log(e);})
}
/* 其他的东西*/
render(){
const {status} = this.props;
返回
所以在这里,当按下 ctrl + p
时,我得到了事件,并且iframe文档也在事件中。另外,我也具有本地状态下iframe的内容。
当触发该事件时,我找不到任何地方可以使用它来进行操作或以某种方式告诉打印预览内容长。
另外,css是
@media打印{
.article-container {
背景颜色:白色;
高度:100%;
宽度:100%;
位置:固定;
最高:0;
左:0;
边距:0;
填充:15px;
font-size:14px;
行高:18px;
}
}
答案 0 :(得分:0)
您的印刷媒体查询不适用于iframe内部内容,这是打印时忽略iframe大小的原因如果您要将特定的打印样式应用于iframe,则必须通过适当的方法(无论是js还是html)从外部进行引用我正在编写一个示例,以引用iframe的样式,对于
可能还有其他实现let cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe1'].document.head.appendChild(cssLink);
答案 1 :(得分:0)
我能够通过捕获CTRL P事件在iframe中打印多个页面,将焦点集中到iframe然后在iframe上开始打印。
<iframe id="iframe" name="iframe" src="2.html"></iframe>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode === 80) {
window.frames["iframe"].focus();
window.frames["iframe"].print();
return false;
}
return true;
});
</script>