如何解决在新窗口中渲染一个 react 组件
我正在开发一个证书管理系统,在完成所有流程后,用户可以打印证书。
我正在努力实现,以便在单击打印按钮时,将打开一个包含准备打印 HTML 证书的新选项卡,以便用户只需按 CTRL + P 即可打印证书。
如何在新窗口中呈现我的 React 证书组件?这样我只会传递作为要放入证书的数据的道具,例如姓名、日期等。例如 <Certificate name={john} />
我已经尝试实现 npm react-new-window 但它不适用于
<Button onclick={() => {
<NewWindow>
<CertificateComponent>
</NewWindow>
}}
>
PRINT BUTTON
</Button>
我研究过 React 门户,但大多数用例都是针对模态的,这是呈现我的“打印”按钮的地方。
抱歉英语/解释不好。谢谢!
解决方法
There can be multiple approaches for this,Approach 1:
create a new route and map the certificateComponent to it,make sure it doesn't have any authentication or any dependency to it.
store the required data for certificateComponent either in session storage or local storage
when the user clicks on print button,redirect the user to this new route using window.open("http://localhost:port/newroute")
in certificateComponent read the values stored in session/local storage and map it accordingly.
Approach2:
Make the certificate component as a overlay which occupies the entire screen which shows up when the user click on print button.
if any ui elements needs to be hided you can do something as shown below,printFn = function() {
//show the certificate component
// hide the ui elements not required
// window.print()
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。