将本机传递状态/支持值响应到自定义<html>页面？
将本机传递状态/支持值响应到自定义<html>页面？
提问于 2021-12-23 18:43:01
我需要创建一个pdf发票使用html在反应本机。我用的是
'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);
};回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-25 07:13:46
这是我们的工作
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);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70466226
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号