0

I want to save my table data as pdf format in device but i have to pass html code which create a PDF file because i am using react-native-html-pdf library. i have wrote the code but my unable to populate my data in string format html. how can i implement it with html string converstion so, please suggest solution of this problem.

Code:

import React, {Component} from 'react';

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

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

const data = {
  headers: ['Name', 'Country', 'City', 'Mobile', 'Salary', 'Date', 'PAN'],

  rows: [
    ['Maxwell', 'Australia', 'Sydney', '123', '$22', '02/02/89', 'yes'],
    ['Mark', 'Canada', 'Toronto', '056', '$8965', '12/06/02', 'no'],
    ['David', 'United Kingdom', 'London', '242', 'S23', '25/02/20', ''],
    ['Kohli', 'India', 'Delhi', '8956', '$32', '04/12/21', 'yes'],
    ['ABD', 'RSA', 'captown', '4515', '$32', '2/11/08', null],
  ],
};

export default class PdfTest extends Component {
  async createPDF() {
    let options = {
      html: `
      <html>
      <head>
      <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      
      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }
      
      tr:nth-child(even) {
        background-color: #dddddd;
      }
      </style>
      </head>
      <body>
      
      <h2>HTML Table</h2>
      
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
        </tr>
      </table>
      
      
  `,
      fileName: 'table3',
      directory: 'Documents',
    };

    let file = await RNHTMLtoPDF.convert(options);
    // console.log(file.filePath);
    Alert.alert(file.filePath);
  }

  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.createPDF}>
          <Text>Create PDF</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
Improve this question
4
  • you can use React.renderToString.stackoverflow.com/questions/29586411/… Commented Mar 23, 2021 at 5:29
  • @iCoders Actually, i want to compile this html at this same component so, i have to populate data here. Commented Mar 23, 2021 at 5:43
  • html:this._renderInfoWindow() ,what about if we call like this..i am not 100% sure about it.just guessing based on your code Commented Mar 23, 2021 at 5:47
  • @iCoders acually, i am new is react, so can you please help me to implement it Commented Mar 23, 2021 at 5:50
Related questions
5
String as html in reactjs
16
dynamic HTML String to react component
3
Convert String in React Components
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.