Reputation: 2339
I want to generate pdf in my react native app. In which I want to display table where rows and its data are generated dynamically onload of document. I have generated that table using html and javascript but now the problem is when pdf was generated, javascript code was not rendered. only static html code was displayed on the pdf as result.
I'm using react-native-html-to-pdf library in my project. I may find difficulty that how do I iterate n all. I just able to print static string of html but not of dynamic data inside it.
Require immediate help. Thank you!
Code:
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>
);
}
}
Upvotes: 1
Views: 2498
Reputation: 330
Push row data into array, and render with back tick,
Here to push into array
this.reportData.push(
`<tr style="text-align:center">
<td>${val.prevId}</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>`,
);
and here to render
await RNPrint.print({
html: `<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-family: calibri;
}
table,
tr,
td {
border: 1px solid #30BCC9;
border-collapse: collapse;
}
.page_break {
page-break-before: always;
}
.badge {
display: inline-block;
padding: 0.25em 0.4em;
font-size: 72%;
font-weight: 300;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.badge-pill {
padding-right: 0.6em;
padding-left: 0.6em;
border-radius: 10rem;
}
.badge-info {
color: #fff;
background-color: #30BCC9;
}
.white {
border-color: #fff !important;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center;">
<h1 style="background-color: #30BCC9; color: #fff; padding: 20px;">KBC FUTSAL</h1>
<h5 style="color: #30BCC9;">Jl. Kerja Bakti No.22, Pondok Cina, Kota Depok, Jawa Barat 16424</h5>
<hr style="border-top: 2px solid #30BCC9;">
</div>
<h2 style="font-weight: bold;">Laporan Penyewaan <sup class="badge badge-pill badge-info"
style="font-weight: 300 !important;"> ${moment(date).format(
'DD MMMM YYYY',
)} - ${moment(dateTo).format('DD MMMM YYYY')}</sup></h2>
<table cellpadding="5" style="width: 100%">
<thead>
<tr style="text-align: center; background-color: #30BCC9; color: #fff;">
<td class="white">ID</td>
<td class="white">Nama Team</td>
<td class="white">Tanggal</td>
<td class="white">Lama Main</td>
</tr>
</thead>
<tbody>
${reportData}
</tbody>
</table>
<div style="text-align: right; margin-top: 25px; margin-right: 50px;">Depok, ${moment().format(
'DD MMMM YYYY',
)}</div>
</body>
</html>`,
});
Upvotes: 1
Reputation: 5196
Just use a simple ES6 template function to pass your dynamic data.
Such as
createTemplate = ({ firstName = 'Roger' }) => {
return `
<html>
//...
<p>${firstName}</p>
</html>
}`
}
And then,
async createPDF() {
let options = {
html: createTemplate({ name: 'Sanakhatun' }),
};
let file = await RNHTMLtoPDF.convert(options)
// ...
}
Upvotes: 0