Question

我想单击一下来打印页面，但是我不想在页面上打印标题和按钮：

<DetailedSummaryContainer id="detailedSummaryContainer">
        {!this.state.printMode ?
                <Header className="container">
                <HeaderText>Header Text</HeaderText>                    
                <ButtonContainer>
                    <StyledButton onClick={this.print}>Print</StyledButton>                        
                </ButtonContainer>
            </Header>
            : null
        }            
        <PrintableArea>
            ...
        </PrintableArea>
</DetailedSummaryContainer>

因此，当单击“打印”时，我想将printMode更改为true，以便它重新渲染dom，然后打印新的dom，然后在显示打印预览时，然后将printMode再次设置为false。 / p>

print = () => {
        this.setState({ printMode: true }, () => 
        {
           console.log(this.state.printMode); 
           window.print();
         });
    }

到目前为止，我还没有将printMode设置为false。这段代码发生的事情是状态变为true，页面重新呈现，并且页眉和按钮未显示，但是没有打开打印预览，而是打开了about:blank新标签。

我要保留DetailedSummaryContainer标签的原因是我希望应用样式。否则，我会向PrintableArea添加一个引用，并执行以下操作：

print = () => {
        var printContents = this.printComponent.innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;        
        window.print();
        document.body.innerHTML = originalContents;
}

在这种方法中，打印效果完美，但是样式仅来自PrintableArea，我也需要应用DetailedSummaryContainer的样式。

如果有更好的方法，我可以采取另一种方法。

Answer 1

我想将printMode之后的false设置回window.print正是您想要的。请注意，window.print会阻止整个javascript进程运行

  click = () => {
    this.setState({ printMode: true }, () => {
      window.print();
      this.setState({ printMode: false })
    });
  }

尝试：https://stackblitz.com/edit/react-ywbl1g?embed=1&file=index.js

Answer 2

根据我的评论：

您可以将裁判放在DetailedSummaryContainer而不是PrintableArea上因为在打印模式下您的标题是null，而不是innerHTML的一部分，所以它与您想要的内容没有冲突，并且您可以保留样式

反应：在setstate后无法调用window.print

2 个答案: