如何通过 React Native 在 3rd 方应用程序中打开 pdf 文件？答案

【问题标题】：How to open pdf files in 3rd party app via React Native?如何通过 React Native 在 3rd 方应用程序中打开 pdf 文件？
【发布时间】：2021-10-16 20:06:15
【问题描述】：

我不想使用 RN 库来创建 pdf 查看器，我想单击文件图标并被询问我想在哪个已安装的应用程序中打开文件。

是否有任何图书馆允许我这样做？

【问题讨论】：

您是要打开本地 pdf 文件还是在互联网某处在线托管的文件？
我正在从 api 获取文件源 (b64)
我认为 react-native-view-pdf 也允许您以 Base64 格式打开 pdf。我在下面的答案中包含了链接。
但是这个库不允许我选择第三方应用来显示 pdf 文件，除非我误解了文档

标签： react-native

【解决方案1】：

我在我的项目中使用了rn-fetch-blob。之后，就简单了；

安卓

const android = RNFetchBlob.android;
android.actionViewIntent(path, 'application/pdf');

iOS

RNFetchBlob.ios.openDocument(path);

【讨论】：

你能分享列出所有 pdf 查看器应用程序的完整代码吗？
但是，它不适用于 Android 10。无法使用 android.actionViewIntent(path, 'application/pdf'); 在 Android 10 中打开文件。 :(
@NarendraSingh Check this solution for android github.com/joltup/rn-fetch-blob/pull/317#issuecomment-492635523 但是它打开但也会在几秒钟内自动关闭不知道为什么。
@NarendraSingh 您可以通过向 AndroidManifest.xml 添加一些内容来解决此问题。检查链接。 github.com/joltup/rn-fetch-blob/issues/749

【解决方案2】：

也许，您可以使用 react native 本身的 Linking 来打开 pdf 文件，例如：

Linking.openURL(url).catch((err) => {
      console.log(err)
});

如果 url 是本地的，你可能想使用类似的东西：

import RNFS from 'react-native-fs';

file://${RNFS.DocumentDirectoryPath}/file.pdf。

或者如果在线，url可以是：

http://www.example.com/file.pdf

你也可以尝试使用这个可用的包：

react-native-view-pdf

在这里告诉我，进展如何。如果这解决了您的问题，请点赞。 :D)

【讨论】：

我正在使用 RNFS 并以您显示的格式进行链接，但它向我显示了一个错误，例如 Error: Unable to open URL: file:///var/mobile/Containers/Data/Application/F842ED12-DDAD-4890-B6CA-66F7EBE460A2/Documents/picture1.jpg
我无法打开 URL 'file:///storage/emulated/0/prophet_app/File0.pdf'
谢谢！！我刚刚导入链接并用作onPress={()=>Linking.openURL("https://xx/xx.pdf")}
谢谢你！.. 完全像一个魅力，没有额外的模块。

【解决方案3】：

我无法使其与本地 pdf 文件的链接一起使用。然后我搜索了更多，发现react-native-file-viewer。有了这个，您可以像这样简单地打开一个pdf：

 import FileViewer from "react-native-file-viewer";
 ... 


 try {
     await FileViewer.open(url, { showOpenWithDialog: true, showAppsSuggestions: true });
 } catch (e) {
     console.warn(TAG, "An error occurred", JSON.stringify(e));
 }

注意：传递给 open 函数的 uri 不需要任何 file:// 前缀。只是正常的路径，比如RNFS.ExternalStorageDirectoryPath + "/mypdf.pdf"

【讨论】：

【解决方案4】：

加载远程 PDF 的简单方法，

Linking.openURL(url).catch((err) => {
  console.log(err)

})

【讨论】：