在 React-Native 应用程序中预览 PDF 文件

Question

在我的 React Native 应用程序中，我想添加预览 PDF 文件的功能。为此，我有一个 API 网址。当我在桌面上的浏览器中打开此网址时，它会预览 Pdf 文件，但是当我在移动设备上的浏览器中打开此文件时，它会开始下载文件。

要预览 pdf，我使用“react-native-webview”。

import WebView from 'react-native-web-view';

const PreviewPdf = () => {

  const [downloadPdf, setDownloadPdf] = useState(true);
  const [pdfPath, setPdfPath] = useState('');

  const openLink = (cn) => {
     const baseURL = 'http://192.168.2.81:7060/getCNToPreview';
     const url = `${baseURL}/${cn?.fileName}`;
 
     setDownloadPdf(true);
     setPdfPath(url);
  };

  return (
     <View>
        <TouchableOpacity onPress=() => openLink(cn)> View </TouchableOpacity>
           
        {
          (downloadPdf && pdfPath !== '') && <WebView source={{ uri: pdfPath }} style={styles.webView} />
        }
     </View>
  )
}

export default PreviewPdf;

在openLink函数中，我设置了预览pdf的url。当 'downloadPdf' 的值为 true 并且 pdfPath 不是 "" 时，应该打开 .

中 pdf 文件的源路径

当它在 Webview 中打开文件路径时，它开始下载文件而不是预览文件。如何在我的react-native应用程序中实现预览pdf文件的功能。

Answer 1

一种方法是首先使用 FileSystem.downloadAsync 将内容下载到本地文件，然后使用 Sharing 在任何能够执行此操作的应用程序（例如 PDF 阅读器）中查看它。像这样的东西：

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

const result = await FileSystem.downloadAsync(
  'https://pdfobject.com/pdf/sample.pdf',
  FileSystem.documentDirectory + 'sample.pdf'
);

if (result.status == 200) {
  Sharing.shareAsync(result.uri);
}