Cordova插件使用——Office文档在线预览那些事

小编:管理员 1123阅读 2022.09.13

最近太忙,就写篇简单的。 关于office文档在线预览,无外乎这几种方式:

1. 文档转成html或pdf格式,再使用WebView加载显示。 
2. 运用WebView打开在线office文档地址。
3. 使用能解释文档的插件打开。
4. 调用本地office程序打开。
复制

第一种方式,有两种实现方法,一是使用在线的接口(如谷歌、微软……但前者被墙,后者付费使用,当然也可以自己部署个接口处理转换,不想特别折腾也可以用微软的office web apps),二是使用第三方的库,在客户端处理好再显示,但据我个别试用,效果不是很完美。

第二种方式,对于ios就很简单了,本来浏览器就支持预览office文档,所以只需调用 webView 加载网络文件路径即可,但可惜的是android的webview不支持,不知道将来会不会支持。

第三种方式,如果有完美的插件倒是好,可是基本没有(如果有找到的,麻烦知会一声,先谢过)。不过单独处理pdf文件的,倒是有一两个可以考虑的,如cordova-plugin-document-viewer。

第四种方式,要求本地装有office文档解释程序,一般装个WPS即可,但要用户额外装个应用的用户体验稍显不足,但既然要看文档了,自然有本地打开的潜在需求,所以这不足就不算太大事了,而且据上面所述,这种方式性价比中最适用于android端的。

于是常规方案呼之欲出:

ios使用webView打开,android调用本地office程序打开。

使用webView打开

对于ios,也仅限于ios,使用浏览器插件,如使用cordova-plugin-themeablebrowser即可。

调用本地应用打开

对于android,可以使用 cordova-plugin-file-opener2cordova-plugin-fileopener

前者是官网native推荐插件,后者是我个人觉得还行的插件,我尝试想把两者优点合并一下,修改成一个新插件,但懒也一直没空,所以搁置了,有兴趣的可以了解下它们,在此我简单描述下:

一、cordova-plugin-file-opener2 有如下特点:

  1. 支持多个平台;
  2. 有打开文件、卸载等方法;
  3. 只能打开本地文件;
  4. android打开文件要手动输入MIME-Types;
  5. 有权限要求;

遇到权限问题,一般可以加上下面两句,具体可以看cordova-plugin-file该file插件文档:


复制

二、cordova-plugin-fileopener

  1. 只支持android平台;
  2. 只有打开文件的方法;
  3. 能打开本地文件和远程文件;
  4. 内置常用MIME-Types,打开文件不需要手动输入;
  5. 基本没遇到权限问题;

cordova-plugin-file-opener2打开远程文件还需借助下载插件(如cordova-plugin-file-transfer,但好处是能自定义下载进度条),还需手动输入MIME-Types,略显繁琐,当下载插件下载路径选择不合适时,还要应对下权限问题,相比之下,下面的cordova-plugin-fileopener更适用于android打开文件,只是功能比较少,或许作者目的就只是专注于打开文件这一功能。后者查看源码,很简单,就一个文件,其打开远程文件的原理其实也是先下载到本地然后再打开,判断文件类型是根据文件路径截取扩展名,然后根据扩展名与内置的MIME-Types映射表转化,这就会有个不足地方:文件路径不带扩展名就不太适用,这个时候可以简单改下源码,添加一个文件扩展名的参数,当这个参数不为空时,用它做映射,为空时,用它原来的方法即可。 如果不满足这样小改动的话,可以把两者优势互补,以cordova-plugin-file-opener2为原始项目,像后者那样添加内置的MIME-Types,当外面不传入时,就用内置的MIME-Types判断处理,遇到远程文件,可以像后者那样先下载到默认路径再打开。

当然,如果源码都不想改,那就考虑这个组合吧:

cordova-plugin-themeablebrowser——ios用 cordova-plugin-fileopener——android用

关联标签: