React Native HTML to PDF

Anand Kashyap

5 May 2021

In this blog, we are going to generate PDF file with the HTML string by using react-native HTML to pdf. So let’s get started.

We are using react-native-html-to-pdf to generate the PDF file from the HTML click here to check the npm page.

We just need the HTML string by the help of it we can generate the PDF.

Installation of npm module :

You just have to run the below mentioned command to install the npm module.

–> npm i react-native-html-to-pdf

After that, we need to link the dependency by run the below-mentioned command.

–> react-native link

There is two way to link your libraries First is above it is automatic by run react-native link it will automatically link your libraries and the second one is manual.

IOS :

Open your project in XCode, right-click on Libraries and select Add Files to “Your Project Name.
Add libRNHTMLtoPDF.a to Build Phases -> Link Binary With Libraries

Android :

Edit android/settings.gradle to included

1 2	include ':react-native-html-to-pdf' project(':react-native-html-to-pdf').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-html-to-pdf/android')

Edit android/app/build.gradle file to include

dependencies {
  compile project(':react-native-html-to-pdf')

}

				
					
				1
2
3
4

						dependencies {
  compile project(':react-native-html-to-pdf')
 
}

					

			
Edit MainApplication.java to include
// import the package
import com.christopherdro.htmltopdf.RNHTMLtoPDFPackage;

// include package
new MainReactPackage(),
new RNHTMLtoPDFPackage()

				
					
				1
2
3
4
5
6

						// import the package
import com.christopherdro.htmltopdf.RNHTMLtoPDFPackage;
 
// include package
new MainReactPackage(),
new RNHTMLtoPDFPackage()

					

			
Add the following WRITE_EXTERNAL_STORAGE permission to AndroidManifest.xml
Note–> You have to add the WRITE_EXTERNAL_STORAGE permission in your AndroidManifes.xml file because the PDF file needs to save in internal storage.

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

By Android API version 6 (Marshmallow) we have to add the run time permissions in android so we need to be prompted for permission dynamically. Follow PermissionsAndroid link for more details on how to do that. The link is mentioned below.

So here our setup has been completed now let’s do some code. For instance, I have code to generate an html invoice to PDF.

Integration :

import React from 'react';

import {
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

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

export default class MyPDFConverter extends React.Component {
  async createPDF() {
    let htmlString = "<table class="body-wrap">
    <tbody><tr>
        <td></td>
        <td class="container" width="600">
            <div class="content">
                <table class="main" width="100%" cellpadding="0" cellspacing="0">
                    <tbody><tr>
                        <td class="content-wrap aligncenter">
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                    <td class="content-block">
                                        <h2>Thanks for using our app</h2>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        <table class="invoice">
                                            <tbody><tr>
                                                <td>Anna Smith<br>Invoice #12345<br>June 01 2015</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table class="invoice-items" cellpadding="0" cellspacing="0">
                                                        <tbody><tr>
                                                            <td>Service 1</td>
                                                            <td class="alignright">$ 20.00</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Service 2</td>
                                                            <td class="alignright">$ 10.00</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Service 3</td>
                                                            <td class="alignright">$ 6.00</td>
                                                        </tr>
                                                        <tr class="total">
                                                            <td class="alignright" width="80%">Total</td>
                                                            <td class="alignright">$ 36.00</td>
                                                        </tr>
                                                    </tbody></table>
                                                </td>
                                            </tr>
                                        </tbody></table>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        <a href="#">View in browser</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        Company Inc. 123 Van Ness, San Francisco 94102
                                    </td>
                                </tr>
                            </tbody></table>
                        </td>
              VGHYU79.-/L;'I
              -
              0IOP0O=-O9876UYHRE    H`GEJGTL9+I67Y
              9</tr>
                </tbody></table>
                <div class="footer">
                    <table width="100%">
                        <tbody><tr>
                            <td class="aligncenter content-block">Questions? Email <a href="mailto:">support@company.inc</a></td>
                        </tr>
                    </tbody></table>
                </div></div>
        </td>
        <td></td>
    </tr>
</tbody></table>";
    let options = {
      html: htmlString,
      fileName: 'HTMLTOPDF',
      directory: 'Documents',
    };

let file = await RNHTMLtoPDF.convert(options)
    console.log(file.filePath);
    alert(file.filePath);
  }

render() {
    return(
      <View>
        <TouchableHighlight onPress={this.createPDF}>
          <Text>Create PDF</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

100

101

102

103

104

105

106

import React from 'react';

import {

Text,

TouchableHighlight,

View,

} from 'react-native';

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

export default class MyPDFConverter extends React.Component {

async createPDF() {

let htmlString = "<table class="body-wrap">

<h2>Thanks for using our app</h2>

</td>

</tr>

<tr>

<td>Anna Smith<br>Invoice #12345<br>June 01 2015</td>

</tr>

<tr>

<td>

<td>Service 1</td>

</tr>

<tr>

<td>Service 2</td>

</tr>

<tr>

<td>Service 3</td>

</tr>

<td class="alignright" width="80%">Total</td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

</td>

</tr>

<tr>

<a href="#">View in browser</a>

</td>

</tr>

<tr>

Company Inc. 123 Van Ness, San Francisco 94102

</td>

</tr>

</tbody></table>

</td>

VGHYU79.-/L;'I

0IOP0O=-O9876UYHRE H`GEJGTL9+I67Y

9</tr>

</tbody></table>

<td class="aligncenter content-block">Questions? Email <a href="mailto:">support@company.inc</a></td>

</tr>

</tbody></table>

</div></div>

</td>

</tr>

</tbody></table>";

let options = {

html: htmlString,

fileName: 'HTMLTOPDF',

directory: 'Documents',

};

let file = await RNHTMLtoPDF.convert(options)

console.log(file.filePath);

alert(file.filePath);

}

render() {

return(

<View>

<Text>Create PDF</Text>

</TouchableHighlight>

</View>

)

}

In conclusion, we will get the pdf file in file.

I hope it will help you.

After that, you can check out my other blogs by clicking here.

Reference link:- https://www.npmjs.com/package/react-native-touch-id ,

PermissionsAndroid:- http://reactnative.dev/docs/permissionsandroid