React render-pdf open in new page onclick 慢问题

Question

我创建了一个 table 具有某些功能的每一行都可以生成 pdf 并使用 render-pdf npm 下载，我想在用户单击下载按钮时在新页面上显示 pdf 预览，它工作但是在他们传递所有数据行数据作为页面加载道具的方法中呈现的问题它有时会影响页面它的时间，并且页面崩溃我尝试单击在道具中发送特定数据它不能正常工作，请帮助任何想法对我来说很充实。

感谢帮助

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { Container } from '@material-ui/core';
import { Text, Page, Document, BlobProvider } from '@react-pdf/renderer';

const data = [
  {
    id: 5,
    name: 'test',
    email: 'test@gmail.com'
  }
];

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

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Container>
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>ID</TableCell>
                <TableCell> Name</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Pdf</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map(booking => (
                <TableRow key={booking.id}>
                  <TableCell>{booking.id}</TableCell>
                  <TableCell>{booking.name}</TableCell>
                  <TableCell>{booking.email}</TableCell>
                  <TableCell>
        <BlobProvider document={<MyDoc BookingData={booking} />}>
          {({ url }) => (
            <a href={url} target="_blank">
              Open in new tab
            </a>
          )}
        </BlobProvider>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Container>
    </div>
  );
}

Answer 1

我不太确定，但我认为问题出在这里：<BlobProvider document={<MyDoc BookingData={booking} />}> 和 const MyDoc = ({ data }) =>。您必须在 MyDoc 而不是 data 中解构 BookingData。我认为 MyDoc 中的 data 与 data 数组冲突。

试试这个，如果有效请告诉我：

改变

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

到

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

和

<BlobProvider document={<MyDoc BookingData={booking} />}>

到

<BlobProvider document={<MyDoc pageData={booking} />}>

Answer 2

您向 const MyDoc = ({ data }) => 传递了一个对象数组，但是当您调用 MyDoc 时，您传递了一个预订对象document={<MyDoc BookingData={booking} /> 尝试解决此问题。 Intead 传递对象数组只传递第一个元素，如果这能解决您的问题，请告诉我们

React render-pdf open in new page onclick 慢问题

React render-pdf open in new page onclick Slow issue

javascript

reactjs

react-pdf