React Native Project to Export HTML Template to PDF Document & Download it in Android

Welcome folks today in this blog post we will be exporting html template to pdf document and download it in android. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react native project using the below command

First of all you need to install the react native cli using the below command

npm i -g react-native-cli

And after that you need to make a new react native project using the below command

react native init htmltopdfproject

And this will create the below directory structure of the react native app as shown below.

As you can see it has created two folders for the android and ios devices. Now we need to add the permissions inside the manifest file as shown below for android devices.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

1	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Here we have added the permission to write the file using the external storage.

Installing Dependencies

Now we need to install some external dependencies and packages to export the html to pdf file and save it inside the file system as shown below

npm i react-native-html-to-pdf

npm i react-native-pdf

npm i react-native-fs

And now we need to modify the App.tsx file and copy paste the below code

App.tsx

import React, { useState } from 'react';
import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import Pdf from 'react-native-pdf';
import RNFS from 'react-native-fs';

function App() {
  const [pdfPath, setPdfPath] = useState(null);

  const [isLoading, setIsLoading] = useState(false);
  const [count, setCount] = useState(1);

  const orderLines = [
    {
      id: 1,
      product: 'Product 1',
      quantity: 1,
      price: '$10.00',
    },
    {
      id: 2,
      product: 'Product 2',
      quantity: 2,
      price: '$20.00',
    },
    {
      id: 3,
      product: 'Product 3',
      quantity: 3,
      price: '$30.00',
    },
  ];

  const generatePDF = async () => {
    setIsLoading(true);
    try {
      const html = `
        <html>
          <head>
            <style>
              body {
                font-family: 'Helvetica';
                font-size: 12px;
              }
              header, footer {
                height: 50px;
                background-color: #fff;
                color: #000;
                display: flex;
                justify-content: center;
                padding: 0 20px;
              }
              table {
                width: 100%;
                border-collapse: collapse;
              }
              th, td {
                border: 1px solid #000;
                padding: 5px;
              }
              th {
                background-color: #ccc;
              }
            </style>
          </head>
          <body>
            <header>
              <h1>Invoice for Order #${count}</h1>
            </header>
            <h1>Order Details</h1>
            <table>
              <tr>
                <th>Order ID</th>
                <td>${count}</td> 
              </tr>
              <tr>
                <th>Order Date</th>
                <td>29-Jul-2022</td>
              </tr>
              <tr>
                <th>Order Status</th>
                <td>Completed</td>
              </tr>
              <tr>
                <th>Order Total</th>
                <td>$13232</td>
              </tr>
            </table>
            <h1>Order Lines</h1>
            <table>
              <tr>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Product Qty</th>
                <th>Product Price</th>
              </tr>
              ${orderLines
          .map(
            line => `
                <tr>
                  <td>${line.id}</td>
                  <td>${line.product}</td>
                  <td>${line.quantity}</td>
                  <td>${line.price}</td>
                </tr>
              `,
          )
          .join('')}
            </table>
            <footer>
              <p>Thank you for your business!</p>
            </footer>
          </body>
        </html>
      `;
      const options = {
        html,
        fileName: `invoice_${count}`,
        directory: 'Invoices',
      };
      const file = await RNHTMLtoPDF.convert(options);
      Alert.alert('Success', `PDF saved to ${file.filePath}`);
      setCount(count + 1);
      setIsLoading(false);
      const fileExists = await RNFS.exists(file.filePath);
      if (!fileExists) {
        console.log('File does not exist!');
        return;
      }
      setPdfPath(file.filePath);
    } catch (error) {
      console.log(error);
    }
  };

  if (isLoading) {
    return <Text>Generating PDF...</Text>;
  }

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={() => generatePDF()}>
        <Text style={styles.text}>Generate PDF</Text>
      </Pressable>
      {pdfPath && <Pdf source={{ uri: 'file://' + pdfPath }} style={styles.pdf} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aac',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    color: '#fff',
  },
  button: {
    backgroundColor: '#6c8ee3',
    padding: 15,
    borderRadius: 10,
    margin: 20,
  },
  pdf: {
    flex: 1,
    width: '100%',
  },
});

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

import React, { useState } from 'react';

import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';

import RNHTMLtoPDF from 'react-native-html-to-pdf';

import Pdf from 'react-native-pdf';

import RNFS from 'react-native-fs';

function App() {

const [pdfPath, setPdfPath] = useState(null);

const [isLoading, setIsLoading] = useState(false);

const [count, setCount] = useState(1);

const orderLines = [

{

id: 1,

product: 'Product 1',

quantity: 1,

price: '$10.00',

{

id: 2,

product: 'Product 2',

quantity: 2,

price: '$20.00',

{

id: 3,

product: 'Product 3',

quantity: 3,

price: '$30.00',

];

const generatePDF = async () => {

setIsLoading(true);

try {

const html = `

<html>

<head>

<style>

body {

font-family: 'Helvetica';

font-size: 12px;

}

header, footer {

height: 50px;

background-color: #fff;

color: #000;

display: flex;

justify-content: center;

padding: 0 20px;

}

table {

width: 100%;

border-collapse: collapse;

}

th, td {

border: 1px solid #000;

padding: 5px;

}

th {

background-color: #ccc;

}

</style>

</head>

<body>

<h1>Invoice for Order #${count}</h1>

</header>

<h1>Order Details</h1>

<table>

<tr>

<th>Order ID</th>

<td>${count}</td>

</tr>

<tr>

<th>Order Date</th>

</tr>

<tr>

<th>Order Status</th>

<td>Completed</td>

</tr>

<tr>

<th>Order Total</th>

</tr>

</table>

<h1>Order Lines</h1>

<table>

<tr>

<th>Product ID</th>

<th>Product Name</th>

<th>Product Qty</th>

<th>Product Price</th>

</tr>

${orderLines

.map(

line => `

<tr>

<td>${line.product}</td>

<td>${line.quantity}</td>

<td>${line.price}</td>

</tr>

)

.join('')}

</table>

<p>Thank you for your business!</p>

</footer>

</body>

</html>

const options = {

html,

fileName: `invoice_${count}`,

directory: 'Invoices',

};

const file = await RNHTMLtoPDF.convert(options);

Alert.alert('Success', `PDF saved to ${file.filePath}`);

setCount(count + 1);

setIsLoading(false);

const fileExists = await RNFS.exists(file.filePath);

if (!fileExists) {

console.log('File does not exist!');

return;

}

setPdfPath(file.filePath);

} catch (error) {

console.log(error);

}

};

if (isLoading) {

return <Text>Generating PDF...</Text>;

}

return (

<Pressable style={styles.button} onPress={() => generatePDF()}>

<Text style={styles.text}>Generate PDF</Text>

</Pressable>

{pdfPath && <Pdf source={{ uri: 'file://' + pdfPath }} style={styles.pdf} />}

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#aac',

alignItems: 'center',

justifyContent: 'center',

text: {

fontSize: 24,

color: '#fff',

button: {

backgroundColor: '#6c8ee3',

padding: 15,

borderRadius: 10,

margin: 20,

pdf: {

flex: 1,

width: '100%',

});

export default App;

As you can see we have the button where we have attached the onclick event handler and inside it we have the callback function and inside it we are exporting the html table template to pdf document and saving it inside the android phone and we will be showing the modal window in which the path of the saved file will be shown and then we will be rendering the pdf file which is created using the pdf viewer component and then we have also attached the custom css styles for the pdf viewer and the button.