React Native下载打开pdf文件
来源:互联网 发布:交换机端口down 编辑:程序博客网 时间:2024/06/10 06:26
本文原创首发于公众号:ReactNative开发圈,转载需注明出处。http://mp.weixin.qq.com/s/rS-4XppSPMKfSwrwUvmtLw
使用到的组件
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
- React Native 下载并打开pdf文件
- React Native下载打开pdf文件
- React Native下载打开pdf文件
- 【linux】【最大文件打开数】【react native】
- Android下载并打开PDF文件
- React Native文件上传下载
- npm下载react-native 慢
- react-native ndk版本下载
- 在线打开.PDF、.TXT等文件,.doc、.xls自动下载
- .net C# 实现点击下载PDF文件(通知浏览器打开下载对话框) 不是直接打开
- Java 打开pdf文件
- pdf文件怎么打开
- Android打开pdf文件
- web 打开pdf文件
- JAVA打开PDF文件
- android 打开pdf文件
- 打开pdf文件
- 打开pdf文件参数
- 服务器、计算机、工作站三者的区别
- 电能质量分析仪安装(access数据库版本 /WIN10系统) 出现
- 基于spring-boot的文件上传和下载(包括图片的压缩)--第一篇(Java代码)
- 使用Tesseract-ocr识别验证码,暴力破解某高校学生登录系统
- Hash冲突
- React Native下载打开pdf文件
- networkx学习
- 门电路加法
- 百度2017春招笔试真题编程题集合:不等式数列 [python]
- Hive文件数创建过多的问题
- 百度2017春招笔试真题编程题集合:买帽子 [python]
- PHP学习笔记 01
- 百度2017春招笔试真题编程题集合:寻找三角形 [python]
- 三菱PLC FX3U SS作用