View base64 pdf in webview react native on iOS?

Question

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.

please include the pdf style so we can have a look on it – chikabala Jan 06 '22 at 09:20 — chikabala, Jan 06 '22 at 09:20

chikabala · Answer 1 · 2022-01-06T11:22:12.690

0

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',
        }}
      />

edited Jan 06 '22 at 11:22

answered Jan 06 '22 at 09:26

chikabala

653
6
24

didn't helped chikabala , so i am getting only one page from the entire pdf file actually it contains 5 pages – vijay Jan 06 '22 at 09:38
try to add `javaScriptEnabled={true}` to your `WebView` – chikabala Jan 06 '22 at 09:46
no didn't helped and the data="${pdf}" is base64 – vijay Jan 06 '22 at 09:49
try to look at this solution: https://stackoverflow.com/a/38804802/15336413 – chikabala Jan 06 '22 at 10:07
that solution wont help me – vijay Jan 06 '22 at 10:49
@vijay please check my update – chikabala Jan 06 '22 at 11:22
i am restricted to use libraries – vijay Jan 07 '22 at 07:05
try creating a snack if u could that will help – chikabala Jan 07 '22 at 08:13
you want the entire component ? – vijay Jan 07 '22 at 09:17
yes upload you're component to snack – chikabala Jan 07 '22 at 09:20
that's it the above code is the component – vijay Jan 07 '22 at 10:10

score 0 · Answer 2 · answered Feb 22 '23 at 14:34

0

This is by default/design.

Safari renderer will render only 1st page on iOS.

https://caniuse.com/pdf-viewer

When displaying PDFs inline rather than separately, iOS Safari will only display the first page of the document.

answered Feb 22 '23 at 14:34

moljac

946
9
12

View base64 pdf in webview react native on iOS?

2 Answers2