reactjs 如何使用react-pdf库在React应用程序中使用用户输入动态填充模板文档并生成组合PDF预览？

omvjsjqw 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(83)

我正在开发一个React应用程序，我想实现一个功能，允许用户在模板文档上填写变量并生成一个组合的PDF预览。我已经安装了react-pdf库，希望获得一些关于如何实现此功能的指导。
以下是我试图实现的目标：
拥有一个模板文档（PDF），其中包含预定义的文本和变量占位符。在React应用程序中渲染模板文档。在用户可以为模板中的变量输入值的一侧提供输入字段。当用户在输入字段中键入时，我希望在PDF预览中动态显示相应的值，以替换占位符。最后，生成一个包含模板文档和用户提供的值的组合PDF预览。我已经安装了react-pdf库，并希望了解如何实现此功能的任何见解或代码示例。react-pdf库中是否有我应该使用的特定技术或组件？如何在用户在输入字段中输入值时动态更新PDF预览？
提前感谢您的帮助！
我安装了react-pdf，并设法显示PDF模板的预览，但仅此而已。

reactjs

来源：https://stackoverflow.com/questions/76261284/how-can-i-dynamically-populate-a-template-document-with-user-input-and-generate

1条答案

按热度按时间

ljsrvy3e1#

你可以有一个像你一样的输入字段的模板，但实际上发送另一个完整的文档到呈现的PDF。
例如，你有你的模板，但你发送外观不同的文档到渲染器。这是一种函数式编程方法，你可以在这里使用一个状态钩子，或者如果你喜欢的话，可以用其他方式重新发明轮子：）

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const renderThePDF = ({username = ''}) => {
  const MyDocument = () => (
    <Document>
      <Page>
        <Text>{username}</Text>
      </Page>
    </Document>
  );

  ReactDOM.render(<MyDocument />, document.getElementById('root'));
}

const MyTemplate = () => (
  <Document>
    <Page>
      <input name="username" onChange={e=> renderThePDF({username: e.target.value})}">
    </Page>
  </Document>
);

// ... render <MyTemplate />

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs 如何使用react-pdf库在React应用程序中使用用户输入动态填充模板文档并生成组合PDF预览？

1条答案

相关问题

热门标签

最新问答