时间戳

首页 > 解决方案 > react-pdf 提交多个值

reactjs - react-pdf 提交多个值

问题描述

我正在尝试创建一个表单，在这种情况下输入一些值，姓名和姓氏，然后生成一个 pdf。我正在使用https://react-pdf.org/advanced#on-the-fly-rendering来帮助完成任务。但是，我只提交了一个值。代码摘录如下：

<BlobProvider
          document={MyDoc({
            value: this.state.value,
          },{
            value1: this.state.value1,
          })}
        >
          {({ url }) => (
            <a href={url} target="_blank">
              Print
            </a>
          )}
        </BlobProvider>

我尝试了多种选择来引入第二个值，它在 console.log 时显示为未定义，因此它不起作用，更不用说更大的形式了。这是代码的完整范围https://codesandbox.io/s/strange-ramanujan-847ph?file=/src/App.js

抱歉，我没有设法让它在codesandbox中工作，但它确实在我的代码编辑器中工作。

标签： reactjspdfreact-pdf

解决方案

设法使其工作，是的，您可以引入尽可能多的值

 <BlobProvider
          document={MyDoc({
            value: this.state.value,
            surname: this.state.surname, 
**more values here**
          })}
        >
          {({ url }) => (
            <a href={url} target="_blank">
              Print
            </a>
          )}
        </BlobProvider>

以下代码的完整范围：

import React from "react";
import { BlobProvider, Document, Page, Text, View } from "@react-pdf/renderer";

const MyDoc = ({ value, surname }) => (
  <Document>
    <Page wrap>
      <Text>Section #1</Text>

      <View style={{ flexDirection: "row", margin: "2", color: "blue" }}>
        <Text style={{ padding: 10 }}>Name : </Text>
        <Text style={{ padding: 10 }}>{value}</Text>
        {console.log("name", value)}
      </View>

      <View style={{ flexDirection: "row", margin: "2", color: "blue" }}>
        <Text style={{ padding: 10 }}>Surname : </Text>
        <Text style={{ padding: 10 }}>{surname}</Text>
        {console.log("surname", surname)}
      </View>
    </Page>
  </Document>
);

class App extends React.Component {
  state = { value: "", surname: "" };

  render() {
    return (
      <div >
        <div>Pdf Generator</div>
        <form>
          <div >
            <div >
              <label>name</label>
              <input

                value={this.state.value}
                type="text"
                onChange={(e) => this.setState({ value: e.target.value })}
                placeholder="name"
              />
            </div>

            <div>
              <label>surname</label>
              <input
                value={this.state.surname}
                type="text"
                onChange={(e) => this.setState({ surname: e.target.value })}
                placeholder="surname"
              />
            </div>
          </div>
        </form>

        <BlobProvider
          document={MyDoc({
            value: this.state.value,
            surname: this.state.surname,
          })}
        >
          {({ url }) => (
            <a href={url} target="_blank">
              Print
            </a>
          )}
        </BlobProvider>
      </div>
    );
  }
}

export default App;

推荐阅读