React Native 在 Android 网页视图中显示 PDF

Posted 2023-02-19

【中文标题】React Native 在 Android 网页视图中显示 PDF

【英文标题】：React Native display PDF in Android web view

【发布时间】：2019-11-20 12:42:48

【问题描述】：

我有一个 React Native 应用程序，在该应用程序的某个页面上，我有一个 Web 视图 (react-native-webview) 用于显示来自我们服务器的 PDF。

在 ios 中一切正常，在 android 中，每当我尝试查看我得到的文件时：

Cannot downoad files as permission was denined. Please provide permission to write to storage, in order to download files.

然后我将<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 添加到我的清单中。现在，我收到以下警报：

从用户体验的角度来看，我认为这非常可怕而且非常愚蠢。我没有访问照片、媒体或文件，我想做的只是在 Web 视图中显示一个简单的 PDF。我不希望我的用户看到这样的警报。

当我点击允许时，它会显示 Downloading... 并下载 PDF，就像可以在我的应用程序之外打开的文件一样。我不希望这种行为，我希望 PDF 像 iOS 一样在 Web 视图中呈现。

如何使用 React Native Web 视图在 Android 中显示 PDF，而不会出现与我实际尝试做的事情无关的可怕对话框？

（我正在使用 React Native 0.59.9、Android 8.1、Android SDK 28、react-native-web-view5.12.0）

【问题讨论】：

我记得将 pdf url 附加到 google doc viewer url 以便在 Android 上的 RN webview 中显示它们。像这样https://docs.google.com/gview?embedded=true&url=<pdf-url-goes-here>。文件被下载可能是因为Content-Disposition: attachment pdf 文件的响应标头。此标头将强制浏览器在允许查看内容之前先下载文件。

相关链接：github.com/facebook/react-native/issues/…

@Amar 一些 PDF 位于需要身份验证的服务器上，不确定以这种方式嵌入它们是否可行。

身份验证背后的文档可能会使它变得棘手。在这种情况下，如果您不需要通用文档查看器，您可以使用仅 pdf 的解决方案，例如 react-native-pdf

@Amar 不幸的是，我需要一个通用文档查看器。它可以是 html、PDF 或 Web 视图通常会打开的任何内容，可能会或可能不会在 auth 之后。事先不知道内容，我只知道我有授权，而且是一个文件。

【参考方案1】：

在尝试了各种方法后，我放弃了直接显示 PDF 并将其转换为 HTML。显然没有可靠的方法在默认浏览器中显示 PDF（直接查看 PDF可能在某些机器上工作，但绝对不可靠，因为它在我的设备/模拟器上不可用）。