How to add custom fonts to PDF on Android using react-native-html-to-pdf?

Use the 'fonts' option in the configuration array with file paths like '/fonts/TimesNewRoman.ttf'. Ensure the font files are correctly included in your Android assets directory for proper rendering.

Does react-native-html-to-pdf support CSS3 styles in HTML?

It converts HTML strings to PDF, so basic CSS should work, but complex CSS3 features might not render consistently due to platform-specific WebView limitations. Testing with your specific styles is essential.

react-native-html-to-pdf vs react-native-pdf-lib: which is better?

react-native-html-to-pdf is better for simple HTML-to-PDF conversion with easy setup, while react-native-pdf-lib offers more advanced PDF manipulation like editing existing PDFs but requires more native integration effort.

How to handle errors when generating PDFs with this library?

Wrap the generatePDF call in a try-catch block since it's promise-based. Common errors include invalid HTML or file permission issues; check console logs for specific error messages from the native layer.

Can I generate PDFs in the background on iOS with react-native-html-to-pdf?

The library doesn't explicitly support background generation; it runs on the main thread, so for background tasks, you might need to implement native workarounds or consider server-side alternatives.

What are common pitfalls when using custom HTML for PDF generation?

Complex layouts or large images can cause performance issues or rendering artifacts. Keep HTML simple, avoid excessive CSS, and test on both iOS and Android to ensure consistent output.

Open-Awesome

react-native-html-to-pdf

MITKotlinv1.3.0

A React Native library for converting HTML strings into PDF documents directly on mobile devices.

GitHub

460 stars274 forks0 contributors

What is react-native-html-to-pdf?

react-native-html-to-pdf is a React Native library that converts HTML strings into PDF documents directly within mobile applications. It solves the need for generating printable content like reports or invoices on iOS and Android devices without relying on external services. The library provides customizable options for document dimensions, styling, and output formats.

Target Audience

React Native developers building mobile applications that require on-device PDF generation, such as apps for invoicing, reporting, or document creation.

Value Proposition

Developers choose this library for its simplicity, platform-specific customization options, and seamless integration into React Native projects, eliminating the need for complex native modules or external PDF generation services.

Overview

Convert html strings to PDF documents using React Native

Use Cases

Best For

Generating invoices or receipts in React Native apps
Creating printable reports from dynamic data in mobile applications
Converting user-generated HTML content into PDFs on iOS and Android
Building document generation features without external dependencies
Adding PDF export functionality to React Native business apps
Customizing PDF styling with platform-specific options

Not Ideal For

Projects requiring advanced PDF features like encryption, watermarks, or multi-page headers/footers
Applications that need server-side or batch PDF generation for high scalability
Scenarios where pixel-perfect, cross-platform PDF consistency is critical due to differing iOS and Android options

Pros & Cons

Pros

Lightweight and Simple API

Offers a clean, promise-based API with minimal setup, as demonstrated in the straightforward usage example that requires just a few lines of code.

Platform-Specific Customization

Provides iOS-specific padding and background color options, and Android-specific custom font support, allowing tailored PDF generation per platform directly from the README options table.

Flexible Output Handling

Enables saving PDFs to custom directories, generating base64 strings, and setting custom filenames, giving developers control over output storage and format.

Custom Document Dimensions

Allows setting exact height and width in points for the PDF document, ensuring control over the final document size as shown in the options configuration.

Cons

Limited iOS Directory Support

On iOS, only the 'Documents' directory is accepted for custom paths, restricting file storage flexibility and potentially complicating file management.

Base64 Not Recommended

The README explicitly warns that returning base64 strings is 'not recommended,' limiting reliable use for in-memory PDF data handling or real-time streaming.

Platform Inconsistency

Features like padding are iOS-only and custom fonts are Android-only, which can lead to fragmented development and testing efforts for truly cross-platform apps.

Frequently Asked Questions

Related Projects

react-native-hyperlink

A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable

Stars813

Forks85

Last commit3 months ago

react-native-markdown-display

React Native 100% compatible CommonMark renderer

Stars789

Forks204

Last commit2 months ago

react-native-responsive-fontsize

🔠 Responsive fontSize based on screen-size of the device in React-Native

Stars739

Forks39

Last commit4 months ago

react-native-file-viewer

Native file viewer for React Native. Preview any type of file supported by the mobile device.

Stars447

Forks111

Last commit2 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub