我需要我的Ionic应用程序来运行一个特定的xlsx文件。

Question

大家好，斯塔克韦尔人！

我正在开发一个小型的Android应用程序，它的目的是读取.xlsx文件并以某种形式显示其数据(条形图/甜甜圈图)。由于我没有时间学习和Android所需的一切，所以我使用Cordova & Ionic框架来完成它。我对这些(对AngularJS也很陌生)非常陌生，但我已经习惯了用JavaScript编写代码，并且已经用NodeJS编写了代码。

到目前为止，我已经成功地创建了一个简单的视图，使用高级图表库读取和显示我创建的虚拟数据，并将其直接存储在Javascript/角代码中。但是现在我想要使用我得到的真实数据，但是我被困在两个主要的问题上：

• 首先，我的Ionic应用程序将使用的文件不是直接存储在Android设备文件系统上的文件，而是用户在其邮箱上接收的文件。我不明白如何配置意图过滤器，以便检测到我的应用程序能够打开这些文件(这样用户就可以在试图从邮箱打开.xlsx文件时选择它)。
• 其次，当用户选择我的应用程序打开xlsx文件时，我如何设法在我的JS代码中检索该文件？请注意，我已经找到了图书馆，我将使用它以JSON格式从我的.xlsx文件中提取信息，并且已经对以后如何处理这些数据有了一些想法。

如果你需要更多的信息，我会随时更新这个话题。

Answer 1

1. 与您的MainActivity一起使用意图过滤器(cordova只有一个活动)

在您的主体活动中，在onCreate中添加处理程序：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    // Get the intent that started this activity
    Intent intent = getIntent();

    if (intent != null){
       Uri data = intent.getData(); //get the uri of your xlsx
    }
    .
    . // your cordova code
    .
    .
}

1. 我想你需要一个数据库来存储你的数据。但是，如果您可以针对这个问题制作自己的CordovaPlugin，那么您就可以更快地将数据从本机传输到way视图。如果您选择使用数据库，那么这个插件可能会帮助您

Answer 2

我成功地回答了我自己的问题，这在一定程度上要归功于兰迪卡·尤德希斯提拉的第一个问题。

首先，为了检测到应用程序能够打开XLSX文件，您必须编辑它的AndroidManifest.xml。在一个Ionic应用程序中，这个文件位于：YOUR_APP/platforms/android/AndroidManifest.xml。在<activity>部分中添加以下意图-过滤器(再次感谢这一点，Randyka Yudhistira)：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="file" />
    <data android:mimeType="*/*" />
    <data android:pathPattern=".*\\.xlsx" />
    <data android:host="*" />
</intent-filter>

其次，要打开和读取XLSX文件并从中提取数据，您需要ngCordova插件，您可以使用Bower轻松地安装它，以及名为file的用于Cordova的WebIntent Android插件和ngCorodva插件：

bower install ngCordova
cordova plugin add https://github.com/Initsogar/cordova-webintent.git
cordova plugin add org.apache.cordova.file

在HTML文件中引用ngCordova (在对cordova库的引用之前)：

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

并将其作为角依赖项注入到角模块中：

var yourApp = angular.module("yourApp", ['ionic', 'ngCordova']);

如果你需要给你的应用程序提供一个给定的文件，就像我的应用程序一样，你需要检索文件的URL。为此，在您的Ionic控制器中，添加服务$cordovaFile和$ionicPlatform，并使用webintent (如下所示)将URI获取到您的文件中：

yourApp.controller('yourAppController', function($scope, $ionicPlatform, $cordovaFile) {
  $ionicPlatform.ready(function() {
    if (window.plugins && window.plugins.webintent) { // checks if plugins are enabled and loaded
      window.plugins.webintent.getUri(function (url) {
        if(url) {
          // use your file URL here
        }
      }
    }
  });
}

要打开该文件并读取其数据，您需要将文件的路径与文件的名称分开：

var path = url.slice(0, url.lastIndexOf('/') + 1);
var filename = url.substring(url.lastIndexOf('/') + 1);

最后，您可以使用cordova文件插件以四种不同的方式(如文本、DataURL、BinaryString、ArrayBuffer)和函数cordovaFile.readAs<theWayYouWant>(path, file) (获得承诺)读取文件中的数据；例如，我需要以二进制字符串的形式读取数据：

$cordovaFile.readAsBinaryString(path, filename)
  .then(function(result) { // success
    ...
  }, function() { // failure
    alert('failed to open file');
});

希望这个答案能帮助像我这样挣扎的人打开和读取Ionic应用程序中的文件数据:-)