react-native-html-to-pdf
Convert html strings to PDF documents using React Native
Installation
- Run
npm install react-native-html-to-pdf --save
Option 1: Automatic
- Run
react-native link
Option 2: Manual
iOS
- Open your project in XCode, right click on Libraries and select Add Files to "Your Project Name.
- Add
libRNHTMLtoPDF.a
toBuild Phases -> Link Binary With Libraries
(Screenshot).
Android
- Edit
android/settings.gradle
to included
include ':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 }
- Edit
MainApplication.java
to include
// import the package // include package new MainReactPackage(),new RNHTMLtoPDFPackage()
Usage
; ; ; async { let options = html: '<h1>PDF TEST</h1>' fileName: 'test' directory: 'Documents' ; let file = await RNHTMLtoPDF // console.log(file.filePath); ; } { return <View> <TouchableHighlight onPress=thiscreatePDF> <Text>Create PDF</Text> </TouchableHighlight> </View> }
Options
Param | Type | Default | Note |
---|---|---|---|
html |
string |
HTML string to be converted | |
fileName |
string |
Random | Custom Filename excluding .pdf extension |
base64 |
boolean |
false | return base64 string of pdf file (not recommended) |
directory |
string |
default cache directory | Directory where the file will be created (Documents folder in example above). Please note, on iOS Documents is the only custom value that is accepted. |
height |
number | 792 | Set document height (points) |
width |
number | 612 | Set document width (points) |
iOS Only
Param | Type | Default | Note |
---|---|---|---|
paddingLeft |
number | 10 | Outer left padding (points) |
paddingRight |
number | 10 | Outer right padding (points) |
paddingTop |
number | 10 | Outer top padding (points) |
paddingBottom |
number | 10 | Outer bottom padding (points) |
padding |
number | 10 | Outer padding for any side (points), overrides any padding listed before |
bgColor |
string | #F6F5F0 | Background color in Hexadecimal |
Android Only
Param | Type | Default | Note |
---|---|---|---|
fonts |
Array | Allow custom fonts ['/fonts/TimesNewRoman.ttf', '/fonts/Verdana.ttf'] |