React Native 下载并打开pdf文件

junfeng777 发布于2019-08-21 17:31 / 2778人阅读

摘要：使用到的组件文件下载组件显示组件组件安装到你的项目目录下，执行下面的命令安装示例代码首先下载文件到本地，组件现在只能支持显示手机本地。

本文原创首发于公众号：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 (
                
                    Downloading
                
            );
        }

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

        return (
            
                 { 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;
                })}
            
        )
    }

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89609.html

React Native 文档查看组件

摘要：文档查看组件，可以在手机上直接打开文档，支持远程和本地文档。本文原创首发于公众号：ReactNative开发圈，转载需注明出处。 React Native 文档查看组件：react-native-doc-viewer，可以在手机上直接打开文档，支持远程和本地文档。支持的文档格式：xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Andr...

leone 2019-08-22 11:15 评论0 收藏0
如何使用ReactNative快速开发一个APP

摘要：鉴于我平常使用的是系统，就决定我只开发安卓客户端，客户端我们又招了一个小伙伴。一般来讲，安卓系统是这一两年市面上常用机型配置的系统。从去年的10月份开始，我的大部分工作重心从传统的前端开发转向了使用ReactNative开发APP，在这个过程当中，走过了不少弯路，也遇到了一些技术相关的问题，但总算没有辜负那些对我信任的人。经历过痛苦和无助，终于坚持了下来，一个月的时间把产品成功部署上...

taowen 2019-08-26 13:47 评论0 收藏0
vue下使用 pdf.js 预览和打印 PDF文档兼容React

摘要：我使用前端开发框架是有一个打印文档的需求这个需求最开始是交给后台但是明显不切实际因为后台服务器根本就无法连接打印机所以这个预览加打印文档的需求就交到了前端开始我有想过直接打开文件但事实上直接打开文件的表现不太好如果是在的环境下会直接下载文件我使用前端开发框架是vue,有一个打印PDF文档的需求.这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机.所以这...

vvpvvp 2019-08-26 11:59 评论0 收藏0