[fa icon="calendar"] Publié le 25 April 2019 par Marion Barré


Create a Pdf File with react-native-html-to-pdfand Display It with react-native-pdf.

Context

I was working on a project on which we had to collect data given by the user and then create a pdf report with it. This pdf was sent to a server on which was stored the information. I will share in this article the steps to quickly and simply create a pdf file from data given in the application by the user. After reading it, you will be able to generate invoices and send them to your clients.

If you want to see the entire project, have a look at my git repository!

We will use two libraries:

The final result is shown in the following GIF.

 

Apr-11-2019 14-03-34

 

Getting started with the project

Collect information given by the user

The first thing to do is to collect information from the user. We will use basic TextInput components to get strings given by the user.
This values will be stored in the state of the page.

<TextInput
onChangeText={text =>
this.setState({
value: text,
})
}
value={this.state.value}
/>

Generate the HTML string

To generate our pdf, we need a string of HTML code. An example of function to create a very simple HTML string given a value is the following:

const generateHTML = value =>
`<div>
<span>Hi ${value}, how are you?
</span>
</div>`;
const html = generateHTML(this.state.value);

You can create a file containing your HTML strings creator functions.

Create the PDF

The most important function we will use is converted from the react-native-html-to-pdf.
This function is the one which creates the pdf file.

Installation

Simply run yarn add react-native-html-to-pdf and then react-native link react-native-html-to-pdf.

Usage

It takes as input an object with three keys:

  • HTML which is a string of HTML code
  • fileName which is the targeted file name
  • directory which is most of the time ‘Documents’ and specified the target directory
const options = {html,
fileName: "test",
directory: "Documents"
};
const file = await RNHTMLtoPDF.convert(options);

Display the PDF

To display the pdf into our application, we will use the Pdf component of react-native-pdf.

Installation

Simply run yarn add react-native-pdf and then react-native link react-native-pdf.

Usage
<Pdf
source={pdfSource}
/>

This component requires one prop source which is an object which a uri key.

const pdfSource = { uri: file.filePath };

This key contains the URI of the file to be displayed.
How lucky we are: this information is return by the previous convert method!
The object returned by the method has a filePath key which contains the absolute path of your file.

Go further

Known limits

We haven’t used the custom parameters of the options object given to RNHTMLtoPDF.convert. If you play with them, you will notice that it is impossible to remove the vertical margin of your PDF on Android application.

An issue is also open to tackle the fact that you can’t use custom fonts on Android.

Please note that the # character in the HTML string creates an empty file while generating the PDF file with Chrome version > 71, you can replace the colors in your HTML string with RGB objects.

Conclusion

We have built an application which creates a styled PDF file on your phone, given some values the user can specify thanks to react-native-html-to-pdf. You then can show this PDF file on your application thanks to the PDFcomponent of react-native-pdf or send it by email.

Please reach out with questions and comments!


Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris




Want to rate this article?
Submit Rating

Topics: React Native, pdf html, PDF Form, open pdf