【发布时间】：2019-07-19 11:26:37
【问题描述】：
我想在我的 react native 应用程序中生成 pdf。我想在其中显示表格，其中行及其数据是在文档加载时动态生成的。我已经使用 html 和 javascript 生成了该表，但现在的问题是生成 pdf 时，没有呈现 javascript 代码。结果只有静态 html 代码显示在 pdf 上。
我在我的项目中使用 react-native-html-to-pdf 库。我可能会发现我如何迭代所有的困难。我只能打印 html 的静态字符串，但不能打印其中的动态数据。
需要立即帮助。 谢谢！
代码：
import React, { Component } from 'react';
import { View, Text, TouchableOpacity,TouchableHighlight} from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
export default class CreatePDFExample extends Component{
async createPDF() {
let options = {
html: `<!DOCTYPE html>
<html>
<head>
<title>Report</title>
<style>
.mainContainer {
width: 100%;
border: 2px solid #000;
border-bottom-width: 0px;
}
.headerContainer {
text-align: center;
border-bottom: 2px solid #000;
}
.middleContainer {
margin-left: 5%;
margin-top: 5%;
margin-bottom: 1%;
}
.tableContent{
width: 100%;
border-collapse: collapse;
border-top: 0px solid #000;
}
.tableContent td{
text-align: center;
}
.bottomline {
width: 100%;
border-color: #000;
border-style: solid;
bottom-width: 1px;
border-top-width: 0px;
}
hr{
border: 1px solid #000;
margin-left: 10%;
margin-right: 10%;
}
.sign td{
border: 2px solid #000;
padding-top: 5%;
padding-bottom: 5%;
}
</style>
<script type="text/javascript">
function addRow() {
var table = document.getElementById("tble");
var colCount = table.rows[0].cells.length;
var rowCount = 5; //length of database items
for(var i = 0; i < rowCount; i++){
var row = table.insertRow(1); //Insert Row from position 1
var srNo = row.insertCell(0);
var date = row.insertCell(1);
var particular = row.insertCell(2);
var type = row.insertCell(3);
var currency = row.insertCell(4);
var amount = row.insertCell(5);
var remark = row.insertCell(6);
for (var j = 0; j < colCount; j++){
srNo.innerHTML = "1";
date.innerHTML = "xxxx";
particular.innerHTML = "xxxx";
type.innerHTML = "xxxx";
currency.innerHTML = "xxxx";
amount.innerHTML = "xxx";
remark.innerHTML = "xxxx";
}
}
}
</script>
</head>
<body onload="addRow()">
<div class="mainContainer">
<div class="headerContainer">
<h3>MY SHEET</h3>
</div>
<div class="middleContainer">
<table>
<tr>
<td><b>Name:-</b></td>
<td></td>
</tr>
<tr>
<td><b>Destination:-</b></td>
<td></td>
</tr>
<tr>
<td><b>Date:-</b></td>
<td></td>
</tr>
</table>
</div>
<div>
<table id = "tble" class="tableContent" border="1">
<tr style = "border: 2px solid #000">
<th>Sr.No</th>
<th>Date</th>
<th>Particulars</th>
<th>Type</th>
<th>Currency</th>
<th>Amount</th>
<th>Remarks</th>
</tr>
<tr style = "border: 2px solid #000">
<td></td>
<td colspan="2"><b>TOTAL</b></td>
<td style="text-align: right"><b></b></td>
<td style="text-align: right"><b></b></td>
<td style="text-align: right"><b></b></td>
<td style="text-align: right"><b></b></td>
</tr>
</table>
</div>
</div>
</body>
</html>`,
fileName: 'test',
directory: 'docs'
};
let file = await RNHTMLtoPDF.convert(options);
console.log(file.filePath);
}
render() {
return(
<View>
<TouchableHighlight onPress={this.createPDF.bind(this)}>
<Text>Create PDF</Text>
</TouchableHighlight>
</View>
);
}
}
【问题讨论】：
-
你成功了吗？
标签： html react-native visual-studio-code react-native-android html-to-pdf