简体   繁体   English

如何将react组件渲染的数据导出为pdf?

[英]How do I export the data rendered by react component to pdf?

I have a component view which has images, tables, and list styled with CSS. 我有一个组件视图,其中包含使用CSS样式的图像,表格和列表。 Is there a legit approach to export/save that view to pdf? 是否有合法方法将该视图导出/保存到pdf? ctrl+p doesn't really work because it grabs the entire page with navigation etc. I'm thinking to implement print button which will redirect to another "PrintComponentCleanView" and from there do ctrl+p . ctrl+p并不能真正起作用,因为它会通过导航等方式抓取整个页面。我正在考虑实现print按钮,该按钮将重定向到另一个“ PrintComponentCleanView”,然后从那里进行ctrl+p This is a 2 step process. 这是一个两步过程。 I'm sure there is a better approach to accomplish this. 我敢肯定有更好的方法可以做到这一点。 Any ideas appreciated. 任何想法表示赞赏。

Adding print styles in your existing stylesheet: 在现有样式表中添加打印样式:

@media print
{
  .navbar {
    display: none;
  }
  ...
}

Adding a different stylesheet for printing: 添加其他样式表进行打印:

<link rel="stylesheet" type="text/css" media="print" href="style.css">

You can then use window.print(); 然后可以使用window.print(); for opening up the Print dialog. 用于打开“打印”对话框。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更新React组件的渲染数据? - How do i update the rendered data of a react component? 这是从获取请求中在React中显示数据的正确方法,如果不是,我如何更改呈现给组件的JSX? - Is this the correct way to show data in React from a fetch request, if not how do I change JSX being rendered to a component? 如何在React中渲染的按钮单击时关闭? - How do I close upon button click of a rendered component in react? 如何制作一个无数据的渲染组件,以后再用数据渲染? - How to make a react component that can be rendered with no data and later rendered with data? 在这里反应新手:如何将数据从一个组件导出到另一个组件? - React newbie here: How do I export data from one component to another? 如何在React组件中使用渲染的JSON数据 - How to use rendered json data in React component 如何在react中总结渲染组件中的数据? - How to sum up data in the rendered component in react? 如何在 Webpack 导出中命名我的 React 组件? - How do I name my React Component in Webpack export? 最初未呈现组件时,如何通过React-Router 4中的URL访问组件? - How do I access a component via URL in React-Router 4 when the component is initially not rendered? 在 React 中,我如何知道哪个父组件渲染了子组件? - In React, how do I know which parent component rendered a child component?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM