设法使其工作,是的,您可以引入尽可能多的值
<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;