React Native下载打开pdf文件

时间:2022-06-05
本文章向大家介绍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地址:https://github.com/forrest23/reacttest