資訊專欄INFORMATION COLUMN
摘要：使用到的組件文件下載組件顯示組件組件安裝到你的項(xiàng)目目錄下，執(zhí)行下面的命令安裝示例代碼首先下載文件到本地，組件現(xiàn)在只能支持顯示手機(jī)本地。
本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。
使用到的組件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到你的項(xiàng)目目錄下，執(zhí)行下面的命令安裝
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組件現(xiàn)在只能支持顯示手機(jī)本地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，因?yàn)榭赡苡卸囗?yè)，所以在打開第一頁(yè)后，利用onLoadComplete事件獲取到一共有多少頁(yè)，然后動(dòng)態(tài)加載后面的幾頁(yè)
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}頁(yè)`);
} }
style={styles.pdf} />
{pages.map((elem, index) => {
return elem;
})}
)
}
完整代碼： GitHub - forrest23/reacttest: Another React Native Project!
舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開發(fā)圈
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89609.html
摘要：文檔查看組件，可以在手機(jī)上直接打開文檔，支持遠(yuǎn)程和本地文檔。 本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。 React Native 文檔查看組件：react-native-doc-viewer，可以在手機(jī)上直接打開文檔，支持遠(yuǎn)程和本地文檔。支持的文檔格式：xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Andr...
摘要：鑒于我平常使用的是系統(tǒng)，就決定我只開發(fā)安卓客戶端，客戶端我們又招了一個(gè)小伙伴。一般來(lái)講，安卓系統(tǒng)是這一兩年市面上常用機(jī)型配置的系統(tǒng)。 從去年的10月份開始，我的大部分工作重心從傳統(tǒng)的前端開發(fā)轉(zhuǎn)向了使用ReactNative開發(fā)APP，在這個(gè)過(guò)程當(dāng)中，走過(guò)了不少?gòu)澛?，也遇到了一些技術(shù)相關(guān)的問(wèn)題，但總算沒(méi)有辜負(fù)那些對(duì)我信任的人。經(jīng)歷過(guò)痛苦和無(wú)助，終于堅(jiān)持了下來(lái)，一個(gè)月的時(shí)間把產(chǎn)品成功部署上...
摘要：我使用前端開發(fā)框架是有一個(gè)打印文檔的需求這個(gè)需求最開始是交給后臺(tái)但是明顯不切實(shí)際因?yàn)楹笈_(tái)服務(wù)器根本就無(wú)法連接打印機(jī)所以這個(gè)預(yù)覽加打印文檔的需求就交到了前端開始我有想過(guò)直接打開文件但事實(shí)上直接打開文件的表現(xiàn)不太好如果是在的環(huán)境下會(huì)直接下載文件 我使用前端開發(fā)框架是vue,有一個(gè)打印PDF文檔的需求.這個(gè)需求最開始是交給后臺(tái),但是明顯不切實(shí)際, 因?yàn)楹笈_(tái)服務(wù)器,根本就無(wú)法連接打印機(jī).所以這...
閱讀 3284·2021-11-24 09:39
閱讀 2964·2021-09-09 11:34
閱讀 3228·2021-09-07 09:58
閱讀 2327·2019-08-30 13:07
閱讀 2898·2019-08-29 15:09
閱讀 1595·2019-08-29 13:01
閱讀 2346·2019-08-26 12:18
閱讀 1982·2019-08-26 10:28
