返回 导航

Cordova

hangge.com

Cordova - 使用cordova-plugin-file-opener2插件借助第三方应用打开文件（pdf、word、excel等）

作者：hangge | 2022-03-08 08:10
    有时我们的 APP 需要加载展示 pdf、word、excel 等文件，或者播放视频音乐，甚至需要打开 apk 文件进行安装升级。这些需求都可以借助 cordova-plugin-file-opener2 这个插件来实现。使用该插件可以调用设备上已安装的其他应用来打开指定文件。下面通过样例进行演示其如何使用。

1，安装插件

（1）我们要在“终端”中进入工程所在的目录，然后运行如下命令安装插件：
注意：为方便使用，除了 cordova-plugin-file-opener2 插件外，我这里还安装了个 cordova-plugin-file 插件。
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-opener2

（2）可以看到插件已经成功添加了：

2，使用样例

（1）首先我们在项目的 assets/www 文件夹下放置一个 excel 文件：

（2）接着下面是样例代码，点击页面上的“打开文件”按钮后，会将打开这个文件。
提示：这里我们其实并不是直接打开原始文件，而是将该文件复制到应用的缓存目录下，然后再打开复制的文件。 
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <link rel="stylesheet" href="css/index.css" /> 
  <title>Hello World</title> 
  <script src="cordova.js"></script> 
  <script>

      // 打开文件
      function openFile() {
          // 原始的文件路径
          let filePath = cordova.file.applicationDirectory + "www/2023.xlsx";
          // 将原始文件复制到app的cache目录下
          window.resolveLocalFileSystemURL(filePath,
            function(fileEntry) {
                window.resolveLocalFileSystemURL(cordova.file.cacheDirectory,
                function(dirEntry) {
                    fileEntry.copyTo(dirEntry, fileEntry.name, copySuccess
                      , function(error) { console.log("文件复制失败！" + JSON.stringify(error)) });
                },
                function(error) {
                    console.log("创建失败！" + JSON.stringify(error));
                });
            },
            function(error) {
                console.log("创建失败！"+ JSON.stringify(error));
            }
          );
      }

      //文件复制成功，打开复制的文件
      function copySuccess(fileEntry) {
          let fileURL = fileEntry.toURL();
          console.log("文件复制成功！新文件路径：" + fileURL);
          // 获取文件 MIMEType
          let fileMIMEType = getMIMEtype(fileURL.substring(fileURL.lastIndexOf('.') + 1));
          console.log("MIMEType为：" + fileMIMEType);
          // 通过文件路径以及文件对应的MIMEType打开文件
          cordova.plugins.fileOpener2.open(fileURL, fileMIMEType, {
              error: function(error) {
                  alert("文件打开失败：" + fileURL + " | 错误信息：" + JSON.stringify(error));
              },
              success: function() {
                  console.log("打开成功!");
              }
          });
      }
      
      // 根据扩展名获取对应的MIMEType
      function getMIMEtype(mimes) {
        switch (mimes.toLowerCase()) {
          case "jpg": return "image/jpeg";
          case "jpeg": return "image/jpeg";
          case "png": return "image/png";
          case "bmp": return "image/bmp";
          case "webp": return "image/webp";
          case "gif": return "image/gif";
          case "xls": return "application/vnd.ms-excel";
          case "xlsx": return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
          case "doc": return "application/msword";
          case "docx": return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
          case "ppt": return "application/vnd.ms-powerpoint";
          case "pptx": return "application/vnd.openxmlformats-officedocument.presentationml.presentation";
          case "pdf": return "application/pdf";
          case "3gp": return "video/3gpp";
          case "avi": return "video/x-msvideo";
          case "mp3": return "audio/x-mpeg";
          case "mp4": return "audio/x-mpeg";
          case "wav": return "audio/x-wav";
          default: return "application/octet-stream"; // 万能MIMEType
          }
      }
  </script> 
 </head> 
 <body>
  <button style="font-size:23px;" onclick="openFile()">打开文件</button>   
 </body>
</html>

（3）效果图如下，由于我的设备安装了 WPS，实际上最终是调用 WPS 打开这个 excel 文件。
            
评论

全部评论（0）

回到顶部