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;