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

react-native 中如何预览 pdf、doc等文件呢？

iOS

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

Android

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

pdf 预览

• react-native-pdf
  你需要装以下依赖：

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

依赖有点多，稍微有点重

• 使用web端的库： react-pdf 或者 pdf.js 配合 react-native-webview 。

• react-native-pdf-light
  更加轻量的原生解决方案，Android上使用android.graphics.pdf.PdfRenderer, iOS上使用 CGPDFDocument

文档预览

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

支持的类型：

• Word: docx, docm, dotm, dotx
• Excel: xlsx, xlsb, xls, xlsm
• PowerPoint: pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm

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

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

其他

• react-native-file-viewer

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