How To Print HTML as a Document in React Native?

Hello guys, In this example, we will see how you can Print HTML as a Document in React Native app. It is very easy so let's start with it without wasting any time.




So first of all we need to create a fresh project using cli.
npx react-native init printHTML
Go to the project directory.
cd printHTML
After this, try to run that blank project on both iOS and android devices.
npx react-native run-ios  (mac only)
npx react-native run-android
If everything ok, you will see blank React Native app as shown in image.
Now, install required dependencies.
  • For the printing option, we will use RNPrint component and for that install react-native-print dependency using
yarn add react-native-print
  • To make PDF we will use RNHTMLtoPDF component and for that install react-native-html-to-pdf dependency using
yarn add react-native-html-to-pdf
To handle Execution failed for task ‘:app:transformDexArchiveWithExternalLibsDexMergerForDebug’ error in Android we have to enable multiDex. To enable the multidex open Yourproject -> android -> app -> build.gradle and search for defaultConfig and dependencies and add the following lines:
defaultConfig 

 .....
 multiDexEnabled true 
}
Follow the image for better understanding:

Now you have to install cocoa-pods dependencies and link assets of the project.
cd ios; pod install; cd ..
npx react-native link
So after that you need to replace App.js with this code.
import React, {Component} from 'react';
import {
  Container,
  Header,
  Title,
  Content,
  Body,
  Text,
  Button,
} from 'native-base';
import {View, Platform} from 'react-native';

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

export default class App extends Component {
  state = {
    currentSelectedPrinter: null,
  };

  // iOS Only
  choosePrinter = async () => {
    const currentSelectedPrinter = await RNPrint.selectPrinter({
      x: 100,
      y: 100,
    });
    this.setState({currentSelectedPrinter});
  };

  // @NOTE iOS Only
  silentPrint = async () => {
    if (!this.state.currentSelectedPrinter) {
      alert('Must Select Printer First');
    } else {
      await RNPrint.print({
        printerURL: this.state.currentSelectedPrinter.url,
        html: '<h1>Silent Print</h1>',
      });
    }
  };

  async printHTML() {
    await RNPrint.print({
      html: '<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>',
    });
  }
  async printPDF() {
    const results = await RNHTMLtoPDF.convert({
      html: '<h1>Custom converted PDF Document</h1><p>Paragraph here</p>',
      fileName: 'demo pdf',
      base64: true,
    });

    await RNPrint.print({filePath: results.filePath});
  }

  async printRemotePDF() {
    await RNPrint.print({
      filePath: 'https://graduateland.com/api/v2/users/jesper/cv',
    });
  }

  // iOS UI Only
  iosOptions = () => {
    return (
      <View>
        <Button
          block
          bordered
          style={{margin: 15}}
          onPress={this.choosePrinter}>
          <Text>Choose Printer</Text>
        </Button>
        <Button block bordered style={{margin: 15}} onPress={this.silentPrint}>
          <Text>Silent Prinitng</Text>
        </Button>
      </View>
    );
  };

  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Print HTML/PDF as a Document</Title>
          </Body>
        </Header>
        <Content
          contentContainerStyle={{
            flex: 1,
            justifyContent: 'center',
          }}>
          {Platform.OS === 'ios' && this.iosOptions()}
          <Button block bordered style={{margin: 15}} onPress={this.printHTML}>
            <Text>Print HTML</Text>
          </Button>
          <Button block bordered style={{margin: 15}} onPress={this.printPDF}>
            <Text>Print PDF</Text>
          </Button>
          <Button
            block
            bordered
            style={{margin: 15}}
            onPress={this.printRemotePDF}>
            <Text>Print External Located PDF File</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
Save everything and run the project again by using following commands.
npx react-native run-ios  (mac only)
npx react-native run-android
You will see your Printing app is ready and showing in the simulators (or devices). Output images are attached and link to the video of the project's coding as given below.



I hope you like the article regarding Printing HTML/ PDF as documents in React Native. This is how you can create Printing App in the React Native app for Android and iOS.
If you have any questions or you want to get a tutorial on some topic, you can comment below. There will be more posts coming soon.
Stay tuned! Bye. 🙂

Post a Comment

0 Comments