在反应js中点击按钮生成pdf

Question

我正在从数据库中搜索数据，结果显示在 table form.Then 用户可以下载任何记录的 pdf。我正在使用 @react-pdf/renderer 库来生成 pdf，但是这个库的问题是它只生成一次所有结果的 pdf。因此系统由于大量结果而挂起。我需要一个只生成 pdf 到用户特定记录的库，而不是一次全部生成。

下面是示例

import React, {useState} from 'react';
import { PDFDownloadLink, Document, Page,Text } from '@react-pdf/renderer'

const _data = [
    {
      name: 'Bi'
    },
    {
      name: 'Ars'
    },
    {
      name: 'Saee'
    }
]


const MyDoc = ({data}) => (
  <Document>
    <Page>
    <Text>{data.name}</Text>
    </Page>
  </Document>
)

const App = () => {
  const [data, setData] = useState(_data);
  const clickHandler = (key) => {
    return (
      <PDFDownloadLink document={<MyDoc  data={data[key]} />} fileName="somename.pdf">
        {({ blob, url, loading, error }) => (loading ? 'Loading document...' : url)}
      </PDFDownloadLink> 
    )
  }

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Sr</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
        {data.map((item, i) => {
          return (
              <tr key={i} onClick={() => clickHandler(i)}>
                <td>{i}</td>
                <td>{item.name}</td>
              </tr>   
          );
        })}
        </tbody>
      </table>
    </div>
)
  }

export default App;

Answer 1

好吧，我已经测试了你给我们的代码，它只获取与键对应的行，所以我认为这是预期的，但是只返回一个 PDFDowloadLink 是行不通的，因为它必须是呈现以允许用户单击它。

所以我认为你的问题是你想点击一行，生成一个 link 来下载特定的行，而不是为每个行生成一个 link。

您可以通过在应用程序中添加另一个状态来做到这一点。

例如，如果您要处理用户，您可以添加

const [user,setUser] = useState(null);

管理有关要转换为 PDF 的特定行的信息。

然后使用您的点击侦听器修改带有行信息的用户状态，并在条件管理的 DOM 中呈现 link（如果用户不为空，则显示 link).

例如，如果你想在你的 App 方法中管理它，它可能是这样的：

const App = () => {
  const [data, setData] = useState(_data);
  const [user,setUser] = useState(null);
  const clickHandler = (key) => {
    setUser(data[key]);
  }

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Sr</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
        {data.map((item, i) => {
          return (
              <tr key={i} onClick={() => clickHandler(i)}>
                <td>{i}</td>
                <td>{item.name}</td>
              </tr>   
          );
        })}
        </tbody>
      </table>
      {data.map(value => console.log(value))}
          {user ? (<PDFDownloadLink document={<MyDoc  data={user} />} fileName="somename.pdf">
        {({ blob, url, loading, error }) => (loading ? 'Loading document...' :<a href={url}>Url Link here</a>)}
          </PDFDownloadLink>) : null}
    </div>
)
  }

希望这对您有所帮助。

Answer 2

别担心。它有一个非常简单的解决方案，只需使用 npm react to pdf。

在你的项目中安装这个

npm install react-to-pdf

import React from 'react';
import ReactTOPdf from "react-to-pdf";

const ref = React.createRef();
const PDF = (props) => {
  return (
    <>
      <div className="background_color" >
        <div className="pdf_container" ref={ref} style={{
          This should be your page what you want to make pdf.
        </div>
        <ReactTOPdf targetRef={ref} >
          {({ toPdf }) => 
            <button onClick={toPdf} className="get_started">
              Download
            </button>
          }
        </ReactTOPdf>
      </div>
    </>
  )
}

export default PDF;

在反应js中点击按钮生成pdf

generate pdf on click button in react js

pdf

reactjs

react-pdf