javascript - 打印 <iframe> 超过一页的内容

Question

在我的 React 应用程序中，我有一个 iframe，它加载了 HTML 文档并且它的内容超过了 1 页。按 Ctrl+p 我想分几页打印，但打印预览只显示一页。

如何识别iframe的内容不止一个A4页面？

chrome devtool 中的 DOM 看起来像

<div class="article-container">
  <iframe style="">#document
   /* hundreds of <p> tags */
  </iframe>
</div>

React App 中的结构是这样的

   <div className="article-container">
      <FrameText content={content} status={!this.state.editStatus} />
   </div>

和框架文本

class FrameText extends React.Component<Props> {
  iframe: HTMLIFrameElement;
  compinentDidMount(){
    window.addEventListener('beforeprint',(e)=>{console.log(e);})
  }
  /* other stuff*/
  render() {
      const { status } = this.props;
      return <iframe ref={(ref) => (this.iframe = ref!)} style={!status ? { display: 'none' } : {}} />;
  }

所以在这里，当按下 ctrl+p 时，我得到了事件并且 iframe 文档在事件中。另外，我在本地状态下也有 iframe 的内容。

我在任何地方都找不到当这个事件被触发时我能用它做什么来操纵或以某种方式告诉打印预览内容很长。

另外，css是

@media print {
  .article-container {
    background-color: white;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
  }
}

Answer 1

您的打印媒体查询不适用于 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);