Home

Awesome

react-native-html-to-pdf

Convert html strings to PDF documents using React Native

Installation

  1. Run npm install react-native-html-to-pdf --save

Option 1: Automatic

  1. Run react-native link

Option 2: Manual

iOS

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

Android

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')
dependencies {
  ....
  compile project(':react-native-html-to-pdf')

}
// import the package
import com.christopherdro.htmltopdf.RNHTMLtoPDFPackage;

// include package
new MainReactPackage(),
new RNHTMLtoPDFPackage()
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Also starting from Android M, users need to be prompted for permission dynamically. Follow this link for more details on how to do that.

Usage


import React, { Component } from 'react';

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

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

export default class Example extends Component {
  async createPDF() {
    let options = {
      html: '<h1>PDF TEST</h1>',
      fileName: 'test',
      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>
    )
  }
}

Options

ParamTypeDefaultNote
htmlstringHTML string to be converted
fileNamestringRandomCustom Filename excluding .pdf extension
base64booleanfalsereturn base64 string of pdf file (not recommended)
directorystringdefault cache directoryDirectory where the file will be created (Documents folder in example above). Please note, on iOS Documents is the only custom value that is accepted.
heightnumber792Set document height (points)
widthnumber612Set document width (points)

iOS Only

ParamTypeDefaultNote
paddingLeftnumber10Outer left padding (points)
paddingRightnumber10Outer right padding (points)
paddingTopnumber10Outer top padding (points)
paddingBottomnumber10Outer bottom padding (points)
paddingnumber10Outer padding for any side (points), overrides any padding listed before
bgColorstring#F6F5F0Background color in Hexadecimal

Android Only

ParamTypeDefaultNote
fontsArrayAllow custom fonts ['/fonts/TimesNewRoman.ttf', '/fonts/Verdana.ttf']