在react-native中使用默认应用程序在设备上打开文件(pdf，word，excel，png等)

xbp102n0 于 2023-04-07 发布在 React

关注(0)|答案(2)|浏览(339)

我正在使用react-native-fs下载文件（pdf，word，excel，png等），我需要在其他应用程序中打开它。是否可以使用Linking打开下载的文件或更好地打开可能的应用程序对话框，如使用Sharing时？下面代码中的Linking试图打开文件，但它立即关闭，没有任何通知，但是我的应用程序仍然工作正常。有没有一些特殊的方法来构建特定文件类型的深度链接的URL？最佳解决方案的任何想法？
我看到有旧的软件包react-native-file-opener，但它不再维护。这个解决方案将是伟大的。
下载组件的简化代码：

import React, { Component } from 'react';
import { Text, View, Linking, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import RNFS from 'react-native-fs';

import { showToast } from '../../services/toasts';

class DownloadFile extends Component {
  state = {
    isDone: false,
  };

  handleDeepLinkPress = (url) => {
    Linking.openURL(url).catch(() => {
      showToast('defaultError');
    });
  };

  handleDownloadFile = () => {
    RNFS.downloadFile({
      fromUrl: 'https://www.toyota.com/content/ebrochure/2018/avalon_ebrochure.pdf',
      toFile: `${RNFS.DocumentDirectoryPath}/car.pdf`,
    }).promise.then(() => {
      this.setState({ isDone: true });
    });
  };

  render() {
    const preview = this.state.isDone
      ? (<View>
        <Icon
          raised
          name="file-image-o"
          type="font-awesome"
          color="#f50"
          onPress={() => this.handleDeepLinkPress(`file://${RNFS.DocumentDirectoryPath}/car.pdf`)}
        />
        <Text>{`file://${RNFS.DocumentDirectoryPath}/car.pdf`}</Text>
      </View>)
      : null;
    return (
      <View>
        <TouchableOpacity onPress={this.handleDownloadFile}>
          <Text>Download File</Text>
        </TouchableOpacity>
        {preview}
      </View>
    );
  }
}

export default DownloadFile;

react-native

来源：https://stackoverflow.com/questions/46180225/open-a-file-pdf-word-excel-png-etc-on-device-with-its-default-application

2条答案

按热度按时间

sqserrrh1#

经过一番研究，我决定使用react-native-fetch-blob。从0.9.0版本开始，可以使用Intent打开下载的文件并使用Download Manager。它也有API for iOS用于打开文档。
立即编码：

...
const dirs = RNFetchBlob.fs.dirs;
const android = RNFetchBlob.android;
...

  handleDownload = () => {
    RNFetchBlob.config({
      addAndroidDownloads: {
        title: 'CatHat1.jpg',
        useDownloadManager: true,
        mediaScannable: true,
        notification: true,
        description: 'File downloaded by download manager.',
        path: `${dirs.DownloadDir}/CatHat1.jpg`,
      },
    })
      .fetch('GET', 'http://www.swapmeetdave.com/Humor/Cats/CatHat1.jpg')
      .then((res) => {
        this.setState({ path: res.path() });
      })
      .catch((err) => console.log(err));
  };

...
render() {
...
        <Icon
          raised
          name="file-pdf-o"
          type="font-awesome"
          color="#f50"
          onPress={() => android.actionViewIntent(this.state.path, 'image/jpg')}
...
}

赞(0）回复(0）举报 2023-04-07

xesrikrc2#

使用react-native-file-viewer预览文件，使用react-native-f获取文件的路径。像这样：

import RNFS from 'react-native-fs';
import FileViewer from 'react-native-file-viewer';

const returnFilePath = fileName => {
  const dirPath =
    Platform.OS === 'ios'
      ? `${RNFS.DocumentDirectoryPath}`
      : `${RNFS.DownloadDirectoryPath}`;
  const filePath = dirPath + `/${fileName}`;
  return filePath;
};

export function previewFile(filePath) {
  FileViewer.open(filePath)
    .then(() => {
      console.log('Success');
    })
    .catch(_err => {
      console.log(_err);
    });
}

赞(0）回复(0）举报 2023-04-07

我来回答

在react-native中使用默认应用程序在设备上打开文件(pdf，word，excel，png等)

2条答案

相关问题

热门标签

最新问答