ReactNative下载打开pdf⽂件
使⽤到的组件
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到你的项⽬⽬录下，执⾏下⾯的命令安装
1. npm install react-native-fs --save
2. react-native link react-native-fs
3.
4. npm i react-native-pdf-view --save
5. react-native link react-native-pdf-view
⽰例代码
⾸先下载pdf⽂件到本地，react-native-pdf-view组件现在只能⽀持显⽰⼿机本地pdf。
1. var DownloadFileOptions = {
2.            fromUrl: pdfDownloadURL,          // URL to download file from
3.            toFile: this.pdfPath        // Local filesystem path to save the file to
4.        }
5. var result = RNFS.downloadFile(DownloadFileOptions);
6.        console.log(result);
7.
8. var _this = this;
9.        result.then(function (val) {
0.            _this.setState({
1.                isPdfDownload: true,
2.            });
3.        }, function (val) {
4.            console.log('Error Result:' + JSON.stringify(val));
5.        }
6.        ).catch(function (error) {
7.            console.ssage);
8.        });
显⽰pdf，因为可能有多页，所以在打开第⼀页后，利⽤onLoadComplete事件获取到⼀共有多少页，然后动态加载后⾯的⼏页
1. render() {
2. if (!this.state.isPdfDownload) {
3. return (
4.                <View style={ainer}>
5.                    <Text>Downloading</Text>
6.                </View>
7.            );
8.        }
9.
0. var pages = [];
1. for (var i = 2; i < this.state.pageCount + 1; i++) {
2.            pages.push(
3.                <PDFView ref={(pdf) => { this.pdfView = pdf; } }
4.                    key={"sop" + i}
5.                    path={this.pdfPath}
6.                    pageNumber={i}
7.                    style={styles.pdf} />
8.            );
9.        }
20.reactnative开发
1. return (
2.            <ScrollView style={styles.pdfcontainer}>
3.                <PDFView ref={(pdf) => { this.pdfView = pdf; } }
4.                    key="sop"
5.                    path={this.pdfPath}
6.                    pageNumber={1}
7.                    onLoadComplete={(pageCount) => {
8. this.setState({ pageCount: pageCount });
9.                        console.log(`pdf共有: ${pageCount}页`);
0.                    } }
1.                    style={styles.pdf} />
32.
3.                {pages.map((elem, index) => {
4. return elem;
5.                })}
6.            </ScrollView>
7.        )
8.    }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。