7

我正在使用以下代码下载文件（可以是 PDF 或 DOC），然后使用链接打开它。

const { dirs } = RNFetchBlob.fs;
let config = {
    fileCache : true,
    appendExt : extension,
    addAndroidDownloads : {
        useDownloadManager : false,
        notification : false,
        title : 'File',
        description : 'A file.',
        path: `${dirs.DownloadDir}/file.${extension}`,
    },
};
RNFetchBlob.config(config)
    .fetch(
        method,
        remoteUrl,
        APIHelpers.getDefaultHeaders()
    )
    .then((res) => {
        let status = res.info().status;
        if (status == 200) {
            Linking.canOpenURL(res.path())
                .then((supported) => {
                    if (!supported) {
                        alert('Can\'t handle url: ' + res.path());
                    } else {
                        Linking.openURL(res.path())
                            .catch((err) => alert('An error occurred while opening the file. ' + err));
                    }
                })
                .catch((err) => alert('The file cannot be opened. ' + err));
        } else {
            alert('File was not found.')
        }
    })
    .catch((errorMessage, statusCode) => {
        alert('There was some error while downloading the file. ' + errorMessage);
    });

但是，我收到以下错误：

打开文件时出错。错误：无法打开 URL： file:///Users/abhishekpokhriyal/Library/Developer/CoreSimulator/Devices/3E2A9C16-0222-40A6-8C1C-EC174B6EE9E8/data/Containers/Data/Application/A37B9D69-583D-4DC8-94B2- 0F4AF8272310/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_o259xexg7axbwq3fh6f4.pdf

我需要为 iOS 和 Android 实现解决方案。

4

4 回答 4

3

我认为最简单的方法是使用react-native-file-viewer包。

它允许您提示用户选择一个应用程序来打开文件（如果有多个已安装的应用程序支持 mimetype）。

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

const path = // absolute-path-to-my-local-file.
FileViewer.open(path, { showOpenWithDialog: true })
.then(() => {
    // success
})
.catch(error => {
    // error
});

于 2020-07-23T23:15:18.937 回答
0

所以，我最终通过用包react-native-file-viewer替换 Linking 来做到这一点。

在我的APIHelpers.js：

async getRemoteFile(filePath, extension, method = 'GET') {
    const remoteUrl = `${API_BASE_URL}/${encodeURIComponent(filePath)}`;
    const { dirs } = RNFetchBlob.fs;
    let config = {
        fileCache : true,
        appendExt : extension,
        addAndroidDownloads : {
            useDownloadManager : false,
            notification : false,
            title : 'File',
            description : 'A file.',
            path: `${dirs.DownloadDir}/file.${extension}`,
        },
    };

    return new Promise(async (next, error) => {
        try {
            let response = await RNFetchBlob.config(config)
                .fetch(
                    method,
                    remoteUrl,
                    this.getDefaultHeaders()
                );
            next(response);
        } catch (err) {
            error(err);
        }
    });
}

在我的Actions.js

export function openDocument(docPath, ext) {
    return async (dispatch) => {
        dispatch(fetchingFile());
        APIHelpers.getRemoteFile(docPath, ext).then(async function(response) {
            dispatch(successFetchingFile());
            let status = response.info().status;
            if (status == 200) {
                const path = response.path();
                setTimeout(() => {
                    FileViewer.open(path, {
                        showOpenWithDialog: true,
                        showAppsSuggestions: true,
                        })
                        .catch(error => {
                            dispatch(errorOpeningFile(error));
                        });
                }, 100);
            } else {
                dispatch(invalidFile());
            }
            }).catch(function(err) {
                dispatch(errorFetchingFile(err));
            });
    }
}

在我的Screen.js


import { openDocument } from 'path/to/Actions';

render() {
    return <Button
                title={'View file'}
                onPress={() => this.props.dispatchOpenDocument(doc.filepath, doc.extension)}
            />;
}
.
.
.
const mapDispatchToProps = {
    dispatchOpenDocument: (docPath, ext) => openDocument(docPath, ext),
}
于 2020-01-29T19:59:06.657 回答
0

你是从网上下载的吗？我可以看到pdf路径附加在错误路径的末尾。
对于网页 URL，必须相应地设置协议（“http://”、“https://”）！

尝试将适当的方案附加到您的路径。从下面提到的链接中查看。

于 2020-04-16T10:06:29.197 回答
0

这可以通过 'rn-fetch-blob' 来完成

RNFetchBlob.android.actionViewIntent(fileLocation, mimeType);
于 2021-04-07T07:14:41.770 回答