ANTD 表打印使用 ReactToPrint 组件

【问题标题】：ANTD table Print using ReactToPrint componentANTD 表打印使用 ReactToPrint 组件
【发布时间】：2021-10-29 04:55:11
【问题描述】：

我正在尝试使用 ReactToPrint 挂钩打印 ANTD 表，一切似乎都工作正常，但我想在打印前在页面顶部显示一些文本。意味着我想为标题显示一些文本，当我将标题组件的可见性设置为 true 时，它不会在第一次单击时打印，它会在第二次单击时显示，但我想在第一次单击时显示标题以及当我打印或取消，标题应隐藏。

请帮帮我，请按两次打印按钮在下面的链接中查看结果。

https://codesandbox.io/s/usestate-not-updating-data-when-passing-from-parent-functional-component-using-r-forked-xuhnl

提前致谢

【问题讨论】：

虽然提供外部链接很好，但您的问题应该是独立的，最好不要依赖外部资源来回答。请在问题中添加相关代码。

标签： javascript reactjs database antd react-to-print

【解决方案1】：

当调用handlePrint 函数时，引用componentRef 指向组件的先前版本。 printHeaderVisible 仅在下一次渲染时变为真。

您可以尝试将打印调用推迟到像这样的下一次渲染

const reactToPrintFunc = useReactToPrint({
  content: () => componentRef.current,

  onBeforeGetContent: () => setprintHeaderVisible(true),
  onAfterPrint: () => setprintHeaderVisible(false)
});

const handlePrint = () => {
  setTimeout(reactToPrintFunc, 0);
};

或按照this issue中的建议进行操作

const handlePrint = useReactToPrint({
  content: () => componentRef.current,

  onBeforeGetContent: () => {
    return new Promise((resolve) => {
      setprintHeaderVisible(true);
      resolve();
    });
  },
  onAfterPrint: () => setprintHeaderVisible(false)
});

【讨论】：

轰轰轰！非常感谢安德烈！