打印React组件的最佳解决方案是什么？

Question

我试图在用户点击打印按钮时打印一个ReactJS组件。我试过使用React-to-print，但在从不同的浏览器（如firefox和edge）打印时出现了样式问题。

以下是我创建的代码沙盒

https:/codesandbox.iosjolly-carson-zvrzu?file=srcApp.js。

在这个代码沙盒中，我使用的是React-to-print，打印组件接收一个对象数组，这个对象数组基本上被转换为多个页面。

在firefox上你会看到这样的问题，点击打印后，第一页在顶部有多余的空白，第二页在打印预览中是空的。

谁能帮我提供@react-to-print的替代方案或其他解决方案？

Answer 1

这很可能是由于浏览器之间的默认样式表不同造成的。

像这样的问题通常可以通过CSS重置来解决。https:/meyerweb.comerictoolscssreset。

这就给所有浏览器提供了一个相同的空白页面样式。然后你可以在上面添加自己的样式。

Answer 2

试试下面的替代模块。https:/www.npmjs.compackagereact-easy-print

https:/github.comcaptrayreact-print。

https:/github.comtacomanatorreact-detect-print。

Answer 3

我在修改CSS后，就能解决这个问题。杰尔姆的 解决办法是有助于从 这个 线程。

这里是新的CSS。 这也有助于消除计算最后一页页边距的不必要逻辑。

const DataWrapper = styled(TableCell)`
  && {  
    padding-top: 25px;
    height: 100vh;
    display: flex;
  }
`;


const TopAndBottomWrapper = styled(TableCell)`
  && {
    page-break-after: always;
  }
`;

我已经创建了一个新的 代码沙盒.

我实际上做的是我添加了 断裂 每个成分前后除了 高度：100vh这有助于每页安装一个组件。另外 显示：柔性 保持该组件的顶部为 高度：100vh 正在移动中间的组件。