如何从本机应用程序中的 URL 查看和共享 pdf? [英] How to view and share a pdf from an URL in a react native app?

问题描述

我的 React Native 应用程序中有一个用例，其中我必须从端点加载和显示 pdf，并使用本机共享选项共享与附件相同的附件(到 Gmail 应用程序或 WhatsApp 甚至下载它)(ios 和安卓).

我目前正在使用 react-native-pdf 库在应用程序上加载和显示 pdf，它工作正常.问题在于共享选项.我尝试使用 facebook 的

解决方案

我已经使用 react-native-share 库设法解决了这个问题.但不幸的是，这在 Android 上共享时出现问题并抛出错误 Cannot attach the file.

在这里分享答案，因为我无法在评论部分发布整个代码.

shareBill = async (title: string) =>{const billPdfPath = this.props.billPdfDataFetched?.path;如果(！billPdfPath){返回;}const newPath = `${RNFetchBlob.fs.dirs.CacheDir}/${title}_bill.pdf`;等待 RNFetchBlob.fs.cp(billPdfPath, newPath);常量共享选项 = {标题:标题，主题:`${strings('emailSubject')} – ${title}`,消息:`${title} bill`，网址:`file://${newPath}`，类型:'应用程序/pdf'，失败取消:真，};尝试 {等待 RNShare.open(shareOptions);} 抓住(错误){//在这里做点什么} 最后 {RNFetchBlob.fs.unlink(newPath);}};

AndroidManifest 文件的权限

<uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE"/><uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE"/>

如果其他人在与 Android 共享时遇到类似问题，请帮助我.

I have a use-case in my react native app wherein I have to load and display a pdf from an endpoint and also share the same as an attachment(to Gmail app or WhatsApp or even download it) using the native share options (both ios and Android).

I'm currently using the react-native-pdf library to load and show the pdf on the app and it's working fine. The problem is with the share option. I tried using facebook's Share API to achieve this but unfortunately, it doesn't serve my purpose as the pdf file is shared as a link and in Android, I had to pass both message and pdfUrl the same value (at least to get the same result across platforms). I want the pdf file to be shared as an attachment when clicked on any of the share options.

below is my code for the same:

class ViewPdfScreen extends Component<Props, {}> {
  render() {

    const pdfUrl = 'http://samples.leanpub.com/thereactnativebook-sample.pdf'

    const source = {
      uri: pdfUrl,
      cache: true,
      expiration: 900, // cache file expired seconds (0 is not expired)
    };

    return (
      <View style={styles.container}>
        <View style={styles.subContainer}>
          <Text>{title}</Text>
          <TouchableOpacity onPress={() => this.sharePdf(title, pdfUrl)}>
            <Image source={shareBtn} />
          </TouchableOpacity>
        </View>
        <View style={styles.pdfContainer}>
          <Pdf
            source={source}
            onLoadComplete={(numberOfPages, filePath) => {
              console.log(`number of pages: ${numberOfPages}`);
            }}
            onPageChanged={(page, numberOfPages) => {
              console.log(`current page: ${page}`);
            }}
            onError={error => {
              console.log(error);
            }}
            onPressLink={uri => {
              console.log(`Link presse: ${uri}`);
            }}
            style={styles.pdf}
          />
        </View>
      </View>
    );
  }

  shareBill = (title: string, billUrl: string) => {
    Share.share(
      {
        message: billUrl,
        url: billUrl,
        title: title,
      },
      {
        // Android only:
        dialogTitle: `Share ${title}`,
        // iOS only:
        excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
      },
    )
      .then(res => console.log(res))
      .catch(error => console.log(error));
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  subContainer: {
    elevation: 4,
    height: 100,
    flexDirection: 'row',
    backgroundColor: colors.orange,
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    padding: 16,
  },
  pdfContainer: {
    flex: 1,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

export default connect()(ViewPdfScreen);

Did anyone came across a similar situation or have any solution for this?

want something similar to this below (taken from google)

解决方案

I've managed to solve this question using the react-native-share library. But unfortunately, this has a problem sharing on Android and throwing an error Cannot attach the file.

Sharing the answer here as I cannot post the entire code in the comments section.

shareBill = async (title: string) => {
    const billPdfPath = this.props.billPdfDataFetched?.path;

    if (!billPdfPath) {
      return;
    }

    const newPath = `${RNFetchBlob.fs.dirs.CacheDir}/${title}_bill.pdf`;

    await RNFetchBlob.fs.cp(billPdfPath, newPath);

    const shareOptions = {
      title: title,
      subject: `${strings('emailSubject')} – ${title}`,
      message: `${title} bill`,
      url: `file://${newPath}`,
      type: 'application/pdf',
      failOnCancel: true,
    };

    try {
      await RNShare.open(shareOptions);
    } catch (err) {
      // do something here
    } finally {
      RNFetchBlob.fs.unlink(newPath);
    }
  };

Permissions on AndroidManifest file

<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE" />

If anyone else has faced a similar problem sharing it with Android, please do help me.

这篇关于如何从本机应用程序中的 URL 查看和共享 pdf?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！