reactjs - 在react js中单击按钮生成pdf

Question

我正在从数据库中搜索数据，结果以表格形式显示。然后用户可以下载任何记录的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

不用担心这个。它有一个非常简单的解决方案，只需使用 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;