How to Add Page-Number in PDF Document automatically by generating in react native

Viewed 15

I am trying to solve an issue which is get page number in PDF Document at the bottom in every page. In My Coding part, i am using react native for android. I have done creating a table in HTML to generate a PDF inside a .js file. somethings like that:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { useState } from 'react';
import { printToFileAsync } from 'expo-print';
import { shareAsync } from 'expo-sharing';

export default function App() {
  let [name, setName] = useState("");

  const html = `
    <html>
      <body>
        <h1>Hi ${name}</h1>
        <p style="color: red;">Hello. Bonjour. Hola.</p>
      </body>
    </html>
  `;

  let generatePdf = async () => {
    const file = await printToFileAsync({
      html: html,
      base64: false
    });

    await shareAsync(file.uri);
  };

  return (
    <View style={styles.container}>
      <TextInput value={name} placeholder="Name" style={styles.textInput} onChangeText={(value) => setName(value)} />
      <Button title="Generate PDF" onPress={generatePdf} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    alignSelf: "stretch",
    padding: 8,
    margin: 8
  }
});

like i want to add page number and imagine i have multiple pages in my PDF documents. How can i get the page numbers for each page. I already tried lots of things seems nothing is works for me. I'll appreciate if anyone help me to fixed it kindly. Thanks for your trying!

0 Answers
Related