React Native 下载并打开pdf文件

本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

使用到的组件

• react-native-fs 文件下载组件 GitHub - johanneslumpe/react-native-fs: Native filesystem access for react-native
• react-native-pdf-view pdf显示组件 GitHub - cnjon/react-native-pdf-view: React Native PDF View

• • • -

组件安装

cd到你的项目目录下，执行下面的命令安装

npm install react-native-fs --save
react-native link react-native-fs

npm i react-native-pdf-view --save
react-native link react-native-pdf-view

示例代码

首先下载pdf文件到本地，react-native-pdf-view组件如今只能支持显示手机本地pdf。

var DownloadFileOptions = {
            fromUrl: pdfDownloadURL,          // URL to download file from
            toFile: this.pdfPath         // Local filesystem path to save the file to
        }
        var result = RNFS.downloadFile(DownloadFileOptions);
        console.log(result);

        var _this = this;
        result.then(function (val) {
            _this.setState({
                isPdfDownload: true,
            });
        }, function (val) {
            console.log('Error Result:' + JSON.stringify(val));
        }
        ).catch(function (error) {
            console.log(error.message);
        });

显示pdf，由于可能有多页，因此在打开第一页后，利用onLoadComplete事件获取到一共有多少页，而后动态加载后面的几页

render() {
        if (!this.state.isPdfDownload) {
            return (
                <View style={styles.container}>
                    <Text>Downloading</Text>
                </View>
            );
        }

        var pages = [];
        for (var i = 2; i < this.state.pageCount + 1; i++) {
            pages.push(
                <PDFView ref={(pdf) => { this.pdfView = pdf; } }
                    key={"sop" + i}
                    path={this.pdfPath}
                    pageNumber={i}
                    style={styles.pdf} />
            );
        }

        return (
            <ScrollView style={styles.pdfcontainer}>
                <PDFView ref={(pdf) => { this.pdfView = pdf; } }
                    key="sop"
                    path={this.pdfPath}
                    pageNumber={1}
                    onLoadComplete={(pageCount) => {
                        this.setState({ pageCount: pageCount });
                        console.log(`pdf共有: ${pageCount}页`);
                    } }
                    style={styles.pdf} />

                {pages.map((elem, index) => {
                    return elem;
                })}
            </ScrollView>
        )
    }

完整代码： GitHub - forrest23/reacttest: Another React Native Project!

举手之劳关注个人微信公众号：ReactNative开发圈