在 webview 中查看 base64 pdf 在 iOS 上反应原生？答案

【问题标题】：View base64 pdf in webview react native on iOS?在 webview 中查看 base64 pdf 在 iOS 上反应原生？
【发布时间】：2022-01-06 08:48:58
【问题描述】：

这是我正在尝试的

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>
            ` }}
        />

以下是我得到的。 PDF 包含 5 页，但屏幕上只有一页。

帮我把完整的 pdf 放到视图中。

【问题讨论】：

请附上pdf格式，以便我们查看
@chikabala flex: 1

标签： javascript html reactjs react-native

【解决方案1】：

尝试使用 ScrollView 包装您的代码以使内容可见/可滚动：

<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>

或者您可以使用专门用于阅读 pdf 的库，例如： https://www.npmjs.com/package/rn-pdf-reader-js 这是一个例子：

<PDFReader
    style={{flex:1, flexGrow:1}}
        source={{
          uri: 'http://www.africau.edu/images/default/sample.pdf',
        }}
      />

【讨论】：

没有帮助 chikabala ，所以我从整个 pdf 文件中只得到一页，实际上它包含 5 页
尝试将javaScriptEnabled={true} 添加到您的WebView
没有没有帮助，data="${pdf}" 是 base64
试试看这个解决方案：stackoverflow.com/a/38804802/15336413
那个解决方案帮不了我