shmily-iOS/Mac

2021-02-08 react-native 预览pdf、do

2021-02-08  本文已影响0人  KingAmo

react-native 中如何预览 pdfdoc等文件呢?

iOS

在 iOS 中,wkwebview 就可以直接预览pdf和doc等各种文档文件了。我们要做的就是使用 react-native-webview,直接加载文件链接,就可以预览。

Android

安卓中就复杂一点,安卓自带的 webview 无法直接预览pdf、doc等文件,webview 访问文件链接,会下载文件,而不是预览。我们要用第三方的库来帮我们实现预览。

pdf 预览
react-native-pdf
rn-fetch-blob 
@react-native-community/progress-bar-android
@react-native-community/progress-view

依赖有点多,稍微有点重

文档预览

使用 微软的免费在线转换服务: https://view.officeapps.live.com/op/view.aspx?src=
把文件路径用 encodeURI() 转换一下,拼接在链接后面,就可以预览 各种文档文件了。但是因为是免费服务,限制 Word 和PowerPoint 文件大小不能超过10兆,Excel 文件 不能超过5兆。

支持的类型:

见: https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

如果项目比较大,还是让后端搭建一套服务,把doc等文件转成pdf把


其他

使用手机里安装的应用打开,缺点是,需要手机装有能打开对应文件的app,而且要跳出我们的应用,跳到第三方应用,给别人增加DAU了


上一篇 下一篇

猜你喜欢

热点阅读