将本机传递 state/props 值反应到自定义 <html> 页面?
React native pass state/props value to custom <html> page?
我需要在 React Native 中使用 html 创建 pdf 发票。为此,我正在使用
'react-native-html-to-pdf'
。实际上pdf正在创建成功。但我担心的是我需要将这些值从状态传递到那个硬编码的 html 标签。到目前为止,我已经在标签内硬编码了一些值。但是我需要传递我的状态值而不是那个。(要清楚地了解,请参阅代码中的注释)有什么办法可以做到这一点吗?
import RNHTMLtoPDF from "react-native-html-to-pdf";
this.state = {
Balance: 100,
Total: 200,
Amount: 400,
};
onPressRequestButton = async () => {
const html = `<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>600.00</span></td> // here i need to set total amount {this.state.amount} is not working at all.
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>600.00</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</table>
</article>
</body>
</html> `;
let options = {
html: html,
fileName: "test",
directory: "Documents",
};
let file = await RNHTMLtoPDF.convert(options);
alert(file.filePath);
};
这是解决方法
onPressRequestButton = async () => {
const Balance = this.state.Balancel;
const Total = this.state.Total;
const Amount = this.state.Amount;
const html =
`
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>` +
Total +
`</span></td>
// here i need to set total amount {this.state.amount} is not working at all.
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>` +
Balance +
`</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>` +
Amount +
`</span></td>
</tr>
</table>
</article>
</body>
</html>
`;
let options = {
html: html,
fileName: "test",
directory: "Documents",
};
let file = await RNHTMLtoPDF.convert(options);
alert(file.filePath);
};
我需要在 React Native 中使用 html 创建 pdf 发票。为此,我正在使用
'react-native-html-to-pdf'
。实际上pdf正在创建成功。但我担心的是我需要将这些值从状态传递到那个硬编码的 html 标签。到目前为止,我已经在标签内硬编码了一些值。但是我需要传递我的状态值而不是那个。(要清楚地了解,请参阅代码中的注释)有什么办法可以做到这一点吗?
import RNHTMLtoPDF from "react-native-html-to-pdf";
this.state = {
Balance: 100,
Total: 200,
Amount: 400,
};
onPressRequestButton = async () => {
const html = `<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>600.00</span></td> // here i need to set total amount {this.state.amount} is not working at all.
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>600.00</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</table>
</article>
</body>
</html> `;
let options = {
html: html,
fileName: "test",
directory: "Documents",
};
let file = await RNHTMLtoPDF.convert(options);
alert(file.filePath);
};
这是解决方法
onPressRequestButton = async () => {
const Balance = this.state.Balancel;
const Total = this.state.Total;
const Amount = this.state.Amount;
const html =
`
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>` +
Total +
`</span></td>
// here i need to set total amount {this.state.amount} is not working at all.
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>` +
Balance +
`</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>` +
Amount +
`</span></td>
</tr>
</table>
</article>
</body>
</html>
`;
let options = {
html: html,
fileName: "test",
directory: "Documents",
};
let file = await RNHTMLtoPDF.convert(options);
alert(file.filePath);
};