Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christopherdro/react-native-html-to-pdf
Convert html strings to PDF documents using React Native
https://github.com/christopherdro/react-native-html-to-pdf
Last synced: 5 days ago
JSON representation
Convert html strings to PDF documents using React Native
- Host: GitHub
- URL: https://github.com/christopherdro/react-native-html-to-pdf
- Owner: christopherdro
- License: mit
- Created: 2015-09-04T04:18:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-14T11:28:01.000Z (6 months ago)
- Last Synced: 2024-11-07T15:06:30.081Z (about 1 month ago)
- Language: Java
- Size: 267 KB
- Stars: 436
- Watchers: 11
- Forks: 270
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-html-to-pdf ★171 - Convert html strings to PDF documents using React Native (Components / Text & Rich Content)
- awesome-react-native-native-modules - react-native-html-to-pdf ★122
- awesome-react-native - react-native-html-to-pdf ★171 - Convert html strings to PDF documents using React Native (Components / Text & Rich Content)
- awesome-react-native - react-native-html-to-pdf ★171 - Convert html strings to PDF documents using React Native (Components / Text & Rich Content)
- awesome-react-native - react-native-html-to-pdf ★171 - Convert html strings to PDF documents using React Native (Components / Text & Rich Content)
- awesome-react-native-ui - react-native-html-to-pdf ★65 - Convert html strings to PDF documents using React Native (Components / Text & Rich Content)
README
# 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
2. Run `react-native link`
### Option 2: Manual
#### iOS
2. Open your project in XCode, right click on [Libraries](http://url.brentvatne.ca/jQp8) and select [Add Files to "Your Project Name](http://url.brentvatne.ca/1gqUD).
3. Add `libRNHTMLtoPDF.a` to `Build Phases -> Link Binary With Libraries`
[(Screenshot)](http://url.brentvatne.ca/17Xfe).
#### Android
- Edit `android/settings.gradle` to included
```java
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
```java
dependencies {
....
compile project(':react-native-html-to-pdf')
}
```
- Edit `MainApplication.java` to include
```java
// import the package
import com.christopherdro.htmltopdf.RNHTMLtoPDFPackage;
// include package
new MainReactPackage(),
new RNHTMLtoPDFPackage()
```
- Add the following `WRITE_EXTERNAL_STORAGE` permission to `AndroidManifest.xml`
```xml
```
Also starting from Android M, users need to be prompted for permission dynamically. Follow [this](https://facebook.github.io/react-native/docs/permissionsandroid) link for more details on how to do that.
## Usage
```javascript
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: '
PDF TEST
',
fileName: 'test',
directory: 'Documents',
};
let file = await RNHTMLtoPDF.convert(options)
// console.log(file.filePath);
alert(file.filePath);
}
render() {
return(
Create PDF
)
}
}
```
## 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']`