CODEWITHSUNDEEP
javascriptreact-nativepdfexpo
Giancarlo Horta
Giancarlo Horta

Reputation: 11

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

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',
  },

});```

Upvotes: 1

Views: 9958

Answers (2)

Waqar Alamgir
Waqar Alamgir

Reputation: 9968

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' });
  };

Upvotes: 2

Gaurav Roy
Gaurav Roy

Reputation: 12200

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

Upvotes: 6

Related Questions