I'm using a 'react-native-html-to-pdf' library. I used it exactly like the example, but I get an error.
Warning Possible Unhandled Promise Rejection(id: 0): TypeError: Cannot read property 'convert' of undefined TypeError: Cannot read property 'convert' of undefined at createPDF$~~~~~~~~~~~~~~~~~~~~~~~~
https://github.com/christopherdro/react-native-html-to-pdf
import React, { Component } from 'react'
import { Text, View, Button, YellowBox, FlatList, Image, ScrollView, Dimensions, TouchableHighlight } from 'react-native'
import Swiper from 'react-native-swiper'
import {styles} from '../style/styles'
import RNHTMLtoPDF from 'react-native-html-to-pdf'
class NavtexPage extends Component {
constructor(props) {//클래스가 생성될때 제일 먼저 실행되는 함수
YellowBox.ignoreWarnings([
'Warning: componentWillReceiveProps is deprecated',
'Warning: componentWillUpdate is deprecated',
]);
super(props);
this.onPressNext = this.onPressNext.bind(this);
this.onPressPrev = this.onPressPrev.bind(this);
this.createPDF = this.createPDF.bind(this);
}
//깃허브 컴포넌트
renderPagination = (index, total, context) => {
return (
<View style={styles.paginationStyle}>
<Text style={{ color: 'grey' }}>
<Text style={styles.paginationText}>{index + 1}</Text>/{total}
</Text>
</View>
)
}
//이전
onPressPrev = () => {
const { indexPage } = this.state;
if (indexPage > 0) {
this.refs.swiper.scrollBy(-1);
}
}
//다음
onPressNext = () => {
const { indexPage } = this.state;
// Probably best set as a constant somewhere vs a hardcoded 5
if (indexPage < 4) {
this.refs.swiper.scrollBy(1);
}
}
async createPDF() {//pdf libray
let options = {
html: '<h1>PDF TEST</h1>',
fileName: 'test',
directory: './data/',
};
console.log('pdf' + options)
let file = await RNHTMLtoPDF.convert(options)
// console.log(file.filePath);
alert(file.filePath);
}
//시작
render() {
return (
<View style={styles.container}>
<View style={{ flex: 0.1, backgroundColor: 'green' }}>
<Text>NAVTEX</Text>
</View>
{/* {깃허브 컴포넌트} */}
<Swiper
style={styles.wrapper}
onIndexChanged={indexPage => this.setState({ indexPage })}
renderPagination={this.renderPagination}
showsButtons={false}
loop={false}
ref={'swiper'}
>
<View style={styles.slide}>
<FlatList
style={{ flex: 1, marginTop: 50, borderWidth: 1, borderColor: 'red' }}
data={this.state.data}
numColumns={1}
renderItem={this._renderItem}
keyExtractor={(item, index) => item.no.toString()}/>
</View>
<View style={styles.slide}>
<Text style={styles.text}>2</Text>
</View>
<View style={styles.slide}>
<Text style={styles.text}>3</Text>
</View>
<View style={styles.slide}>
<Text style={styles.text}>4</Text>
</View>
<View style={styles.slide}>
<Text style={styles.text}>5</Text>
<TouchableHighlight onPress={this.createPDF}>
<Text>Create PDF</Text>
</TouchableHighlight >
</View>
</Swiper>
<View style={styles.buttoncontainer}>
<Button
style={{ with: 75 }}
onPress={this.onPressPrev}
title="Previous">
</Button>
<Button
onPress={this.onPressNext}
title="Next">
</Button>
</View>
</View>
);
}
}
