0
742
ViewsView base64 pdf in webview react native on iOS?
Here is what I am trying
const [pdf, setPdf] = useState("")
let image = "data:application/pdf;base64," + curr.Body.toString('base64');
setPdf(image)
<WebView
style={styles.pdf}
useWebKit={true}
originWhitelist={['*']}
scrollEnabled={true}
mediaPlaybackRequiresUserAction={true}
source={{
html: `
<html>
<object data="${pdf}" type="application/pdf">
<embed
scrollbar="1"
src="${pdf}"
type="application/pdf"
/>
</object>
</html>
` }}
/>
the below is what i am getting. The PDF contains 5 pages but i am getting only one on the screen.
help me to get the full pdf to the view.
·
Juan Pablo Isaza
1 answers
Answer question0
try to wrap your code with a ScrollView to make the content visible/scrollable :
<SafeAreaView style={{flex: 1}}>
<ScrollView
style={{ width: '100%' }}
contentContainerStyle={{ flexGrow: 1 }}
>
<WebView
style={styles.pdf}
useWebKit={true}
originWhitelist={['*']}
scrollEnabled={true}
mediaPlaybackRequiresUserAction={true}
source={{
html: `
<html>
<object data="${pdf}" type="application/pdf">
<embed
scrollbar="1"
src="${pdf}"
type="application/pdf"
/>
</object>
</html>
` }}
/>
</ScrollView>
</SafeAreaView>
Or you can use a library dedicated for reading pdfs, such as : https://www.npmjs.com/package/rn-pdf-reader-js Here is an example :
<PDFReader
style={{flex:1, flexGrow:1}}
source={{
uri: 'http://www.africau.edu/images/default/sample.pdf',
}}
/>
·
Juan Pablo Isaza
Report
Answer question