How do I convert a react-native-table to PDF by clicking button

Viewed 17

I want to create a pdf from my displaying table in an application by clicking a button.

My table is populated with data fetched from an API and I want to convert it to PDF.

I want to use a TouchableOpacity click in react native?

const Task2TableOrg =() => {

    const [data,setData] = useState({});


    var myHeaders = new Headers();
 myHeaders.append("sign", "5f062697e472c5928c7010a3e06063fe09d3992de6574ac6327e1e2e251a1e28");
myHeaders.append("token", "a2066a39a575cbbc9237de633c96219457d38c28103589d26cc754c94a8400bb");

    
    var requestOptions = {
      method: 'GET',
      headers: myHeaders,
      redirect: 'follow'
    };


  
    useEffect(() => {
        fetch("https://www.lampmonitor.com/lampmonitor/api/auth/web/lampControls?projectId=595&pageSize=50", requestOptions)
         .then((response) => response.json())
         .then((data) => setData(data))
         .catch((error) => console.error(error))
     }, []);
   

     const td = ['Lamp No','Road Section'];
const widthArr= [ 150, 150,];  




const arry = data?.data?.items.map(data => {

  const nwArr=[];

  nwArr.pop(data.id);


    nwArr.push(data.fields.lamp_no);
    nwArr.push(data.fields.road_section);
   
  


  return nwArr;
}  
  );
console.log(arry);





return(

    <View style={styles.container}>



        <TouchableOpacity
            onPress={}
        >
          <Text style={styles.buttonText}>Convert PDF</Text>
        </TouchableOpacity>


    <Image source={require('./../asset/icon/logo.jpg')} style={{marginTop:8,width: 250, height: 120}} />

         <ScrollView horizontal={true}>


         <View>

         <Table  style={{marginTop:20}}  borderStyle={{borderWidth: 2, borderColor: 'black'}}></Table>
         <Row
            data={td}
            widthArr={widthArr}
            style={styles.header}
            textStyle={styles.text}
            

      />
      

      <ScrollView>
      <Table borderStyle={{borderWidth: 2, 
        borderColor: 'black'}}>
      <Rows 
      data={arry}
      widthArr={widthArr}
      textStyle={styles.text}
      />
  
      </Table>
      </ScrollView>

         </View>
        
         </ScrollView>

    </View>

 )



  
}
export default Task2TableOrg;
0 Answers
Related