在与Expo反应中打开PDF文件

我正在使用react本机与expo，我正在尝试打开一个PDF文件。我的资产文件夹中已经有文件。我更喜欢不脱离博览会。

我尝试使用react-native-pdf喜欢：

import React, { Component } from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import Pdf from 'react-native-pdf';
export default class PDFExample extends Component {
  render() {
    const source = {uri:'bundle-assets://test.pdf'};
    return (
      <View style={styles.container}>
        <Pdf
          source={source}
          style={styles.pdf} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex:1,
    width:Dimensions.get('window').width,
  }
});

，但没有成功。发生了许多错误，我对此包裹失去了信心。所以我正在寻找一个更简单的解决方案。

问题：
如何在另一个应用程序中打开资产文件。就像，使iOS或Android选择哪个应用程序将打开PDF文件。我可以只使用Extach的Expo中的托管代码来执行此操作？

通过纱线或npm安装以下库：
yarn add react-native-webview expo-file-system expo-constants rn-pdf-reader-js

然后您可以显示一个PDF：

import React from ‘react’
import { ScrollView, View, } from ‘react-native’
import PDFReader from ‘rn-pdf-reader-js’
export default class Publications extends React.Component {
  render() {
      return (
          <PDFReader
               source={{
               uri: ‘http://www.africau.edu/images/default/sample.pdf’,
               }}
          />
       )
    }
}

我发现的解决方法是使用Adobe PDF嵌入API。在React-Native-Webview中使用它。

Adobe PDF嵌入API

我所做的是创建一个新组件并将PDF URL作为其道具，然后显示。

import React from 'react';
import { WebView } from 'react-native-webview';
function PdfViewScreen({route}) {
  const pdfUrl = route.params;
  const myHtml = `<html><body>
      <div id="adobe-dc-view"></div>
      <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
      <script type="text/javascript">
        document.addEventListener("adobe_dc_view_sdk.ready", function(){
          var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
          adobeDCView.previewFile({
            content:{ location:
              { url: '${pdfUrl}'}},
            metaData:{fileName: "Dummy name"}
          },
          {
            embedMode: "SIZED_CONTAINER"
          });
        });
    </script>
  </body></html>`

    return (
  
            <WebView 
              originWhitelist={['*']} 
              source={{ html : myHtml}}
              onMessage={(event) => {
                alert(event.nativeEvent.data);
              }} 
            />
    );
}

export default PdfViewScreen;

相关内容

最新更新

热门标签：