react-native-html-to-pdf

If you need to perform a full reload to reset the app state, use the following platform-specific methods:

• Android: Press the <kbd>R</kbd> key twice or select "Reload" from the Dev Menu (accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS).
• iOS: Press <kbd>R</kbd> in the iOS Simulator.

Before building your app, you must start Metro, the JavaScript build tool for React Native. Run the following command from the root of your project:

# Using npm
npm start

# OR using Yarn
yarn start

With Metro running, open a new terminal window and run the following command to build and launch the app on an Android emulator or connected device:

# Using npm
npm run android

# OR using Yarn
yarn android

For iOS, you must first install CocoaPods dependencies.

1. If this is your first time setting up the project, install CocoaPods using Ruby bundler:

   bundle install

2. Every time you update native dependencies, run:

   bundle exec pod install

3. Once dependencies are installed, run the app:

   # Using npm
   npm run ios
   
   # OR using Yarn
   yarn ios

Install the package using npm to add it to your React Native project.

npm install react-native-html-to-pdf

Import generatePDF from react-native-html-to-pdf and call it with an options object. The function is asynchronous and returns the results of the PDF generation (such as file paths or base64 data).

import { generatePDF } from 'react-native-html-to-pdf';

async function createPDF() {
  let options = {
    html: '<h1>PDF TEST</h1>',
    fileName: 'test',
    base64: true,
  };

  let results = await generatePDF(options);
  console.log(results);
}

When running on Android, you can provide custom fonts using the fonts array. The paths should be provided as an array of strings.

The generatePDF function accepts an options object to control the content and layout of the generated document.

Common Options

When running on iOS, you can use the following options to control padding and background color:

Use the generatePDF function to convert HTML content into a PDF file. This function accepts a PDFOptions object and returns a Promise that resolves to a PDFResult object containing the file details.

import { generatePDF } from 'react-native-html-to-pdf';

const options = {
  // ... PDFOptions properties
};

const result = await generatePDF(options);
// result is a PDFResult

The primary API for this module is the convert method, which takes a PDFOptions object and returns a Promise<PDFResult>. This is the method used to trigger the HTML-to-PDF conversion process.

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

const result = await HtmlToPdf.convert({
  html: '<h1>Hello World</h1>',
  fileName: 'test.pdf',
  base64: true,
});

console.log(result.filePath);

The convert method returns a Promise that resolves to a PDFResult object. This object contains information about the generated file.

Fields:

• filePath: The local file system path to the generated PDF.
• base64: (Optional) The base64 encoded string of the PDF, available if base64: true was passed in PDFOptions.
• numberOfPages: (Optional) The total number of pages in the generated PDF.

export interface PDFResult {
  filePath: string;
  base64?: string;
  numberOfPages?: number;
}