使用 react-pdf 创建大型 PDF

Question

我正在尝试创建一个工具来打印门牌号的安装模板。用户在表格中输入文本，选择字体、大小，然后点击“创建”，创建绘图仪可以打印的 PDF。

我目前面临的问题是这些门牌号的一些尺寸超过 8" 高。选择任何高于 8" 的东西似乎会使网页崩溃。我不确定是因为文本的大小，还是它无法适应页面上的文本，所以它会出错。有没有一种方法可以创建没有特定页面大小并且内容周围只有 3 英寸填充的 PDF？也许我只是错过了一些东西。

import Container from "./Container";
import {
  PDFDownloadLink,
  Document,
  Page,
  Text,
  Font,
} from "@react-pdf/renderer";
import broadsheet from "../fonts/broadsheet.ttf";
import jost from "../fonts/Jost-Regularing.ttf";
import texgyreheros from "../fonts/texgyreheros-regular.otf";

const Preview = (props) => {
  const MyDoc = () => {
    Font.register({
      family: "broadsheet",
      src: broadsheet,
    });
    Font.register({
      family: "jost",
      src: jost,
    });
    Font.register({
      family: "texgyreheros",
      src: texgyreheros,
    });
    return (
      <Document file="/myfile.pdf">
        <Page
          wrap="false"
          orientation="landscape"
          style={{
            fontFamily: props.pdfFont,
            fontSize: props.size,
          }}
        >
          <Text>{props.preview}</Text>
        </Page>
      </Document>
    );
  };

  return (
    <>
      <Container className="bg-white p-5 mb-5">
        <p className={`${props.font} text-[8rem]`}>{props.preview}</p>
      </Container>
      <PDFDownloadLink
        document={<MyDoc />}
        fileName="somename.pdf"
        className="bg-violet-500 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded-full"
      >
        {({ blob, url, loading, error }) =>
          loading ? "Preparing document..." : "Download"
        }
      </PDFDownloadLink>
    </>
  );
};

export default Preview;