如何展开Material UI步进器中用于打印页面的所有步骤？

Question

我正在研究一个使用Material UI stepper的React组件。 要求是数据也必须是可打印的。但是，在打印时，所有步骤都应该扩展并且必须打印。这违反了步进器的默认行为。 @media print似乎不起作用，因为Stepper是通过'active'属性控制的，以切换显示，而不仅仅是CSS类。有人做到过吗？具有不同行为的材料UI组件仅用于打印？让我知道谢谢。

基本步进示例-https://codesandbox.io/s/rm5713kkln

Answer 1

最近我有一个具有相同要求的项目，但是找不到任何具有React组件级别的解决方案。 但是，我可以从redux商店级别找到解决方案。 （如果您使用的是商店）。

• 我将多步骤表单添加到了redux表单（https://redux-form.com/7.4.2/）中[btw，您可以在没有redux表单库的情况下做到这一点]
• 然后将添加到存储中的数据检索到最终的摘要页面。 （步进的最后一步）
• 因为摘要页面包含所有数据，所以我可以在jsPDF中使用此数据（例如客户端PDF生成器）[https://mrrio.github.io/]
• 最后，我发现这种方法比在pdf中使用HTML更干净，因为我可以根据需要更改和改进pdf的外观和UI。 （它不依赖于HTML UI，仅依赖于数据）

希望这会对您有所帮助。