How create PDF in React native Expo using react-native-html-to-pdf?

Question

I'm trying to run a 'Hello World' code using the react-native-html-to-pdf library and create PDF, but I can't set it up at Expo. Could you help me? I tried using the comand react-native link.

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-html-to-pdf": "^0.8.0",
    "react-native-pdf-lib": "^0.2.1",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0"
  },
  "private": true
}

App.js

import React, { Component } from 'react';

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

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

export default class App 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 style={styles.container}>
        <TouchableHighlight onPress={this.createPDF}>
          <Text>Create PDF</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

});```

Gaurav Roy · Accepted Answer · 2019-12-06 13:58:22Z

6

You cannot link any libraries if you are using expo. That's the limitation of expo. If you want to have such functionality, its better you switch to bare react native application by either ejecting from expo , because linking doesnt work in expo. That's a major limitation of expo.

Or you can check the docs of Expo Print ,

expo link

Where they have defined a print function to save html to pdf

Print.printToFileAsync(options)
Prints HTML to PDF file and saves it to app's cache directory.
Arguments
options (object) -- A map of options:
html (string) -- HTML string to print into PDF file.
width (number) -- Width of the single page in pixels. Defaults to 612 which is a width of US Letter paper format with 72 PPI.
height (number) -- Height of the single page in pixels. Defaults to 792 which is a height of US Letter paper format with 72 PPI.
base64 (boolean) -- Whether to include base64 encoded string of the file in the returned object.
Returns
Resolves to an object with following keys:
uri (string) -- A URI to the printed PDF file.
numberOfPages (number) -- Number of pages that were needed to render given content.
base64 (string) -- Base64 encoded string containing the data of the PDF file. Available only if base64 option is truthy. It doesn't include data URI prefix data:application/pdf;base64,.

Hope it helps. feel free for doubts

answered Dec 6, 2019 at 13:58

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giancarlo Horta Over a year ago

I tried using Print.printToFileAsync but I couldn't use with FileSystem.getInfoAsync(fileUri, options). Could you help me with an example?

Gaurav Roy Over a year ago

i've never used that, but you can try docs.expo.io/versions/latest/sdk/filesystem

Waqar Alamgir · Accepted Answer · 2023-06-14 12:40:38Z

2

You need to import these two libraries from Expo:

import * as Print from 'expo-print';
import { shareAsync } from 'expo-sharing';

Then you can use a function like this to export pdf:

const printToFile = async () => {
    const html = `
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  </head>
  <body style="text-align: center;">
    <h1 style="font-size: 50px; font-family: Helvetica Neue; font-weight: normal;">
      Hello Expo!
    </h1>
    <img
      src="https://d30j33t1r58ioz.cloudfront.net/static/guides/sdk.png"
      style="width: 90vw;" />
  </body>
</html>
`;
    // On iOS/android prints the given html. On web prints the HTML from the current page.
    const { uri } = await Print.printToFileAsync({ html });
    console.log('File has been saved to:', uri);
    await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
  };

answered Jun 14, 2023 at 12:40

Waqar Alamgir

9,9884 gold badges33 silver badges37 bronze badges

4 Comments

madsongr Over a year ago

Where would this be saved? Could I create a function to send it to my backend?

Waqar Alamgir Over a year ago

Variable uri is the location of file. You can read the file content or post the file to backend.

metalheadcoder Over a year ago

YOU ARE THE REAL G! It works. but mine a little bit different. here is my solution ``` fetch(htmlUrl) .then((response) => response.text()) .then((html) => printToFileAsync({ html }).then(({ uri }) => { setPdf(uri); }) );```

wail_10 Over a year ago

I have tried this, it works in development mode. When I have generated .apk file this feature didn't work in this phase. Is there any solution for it ?

Collectives™ on Stack Overflow

How create PDF in React native Expo using react-native-html-to-pdf?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related