React Native 下載并打開pdf文件

junfeng777 發布于2019-08-21 17:31 / 2846人閱讀

摘要：使用到的組件文件下載組件顯示組件組件安裝到你的項目目錄下，執行下面的命令安裝示例代碼首先下載文件到本地，組件現在只能支持顯示手機本地。

本文原創首發于公眾號：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開發圈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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