我需要我的 Ionic 应用程序来获取特定的 xlsx 文件运行

Question

大家好 Stackverflow 的朋友们！

我正在开发一个小型 Android 应用程序，其目的是读取 .xlsx 文件并以特定形式显示其数据（bar/doughnut 图表）。因为我没有时间在 Java 和 Android 中学习我需要的一切，所以我正在使用 Cordova 和 Ionic 框架 来完成它。我对这些很陌生（对 AngularJS 也很陌生）但我习惯用 JavaScript 编写代码，并且已经用 NodeJS 编写了代码。

到目前为止，我已经设法创建了一个简单的视图，它使用 Highcharts library 读取和显示我创建并直接存储在我的 Javascript/Angular 代码中的虚拟数据。但是现在我想使用我得到的真实数据，但是遇到了两个主要问题：

首先，我的 Ionic 应用程序将使用的文件不是直接存储在 Android 设备文件系统中的文件，而是用户在其邮箱中收到的文件。我不明白如何配置 intent-filter，所以我的应用程序被检测为能够打开此类文件（以便用户在尝试从他的邮箱打开 .xlsx 文件时可以选择它）
其次，当用户 select 我的应用程序打开一个 xlsx 文件时，我如何设法在我的 JS 代码中检索该文件？请注意，我已经找到 the library 我将使用 JSON 格式从我的 .xlsx 文件中提取信息，并且已经对之后如何处理这些数据有了想法。

如果您需要更多信息，我会及时更新此主题。

Answer 1

在 MainActivity 中使用 Intent 过滤器（cordova 只有 1 activity 顺便说一下）

<activity android:name="com.example.app.MainActivity">
    <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> 
</activity>

然后在您的 mainactivity 中，在您的 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
    .
    .
}

我认为您需要一个数据库来存储您的数据。但是如果你能自己制作CordovaPlugin for that problem, then you got the faster way to transfer your data from native to your webview. And if you choose to use a database, then this plugin可能会对你有帮助

Answer 2

我已经设法回答了我自己的问题，部分要感谢第一个问题的 Randyka Yudhistira。

首先，为了检测您的应用程序能够打开 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 plugin, that you can install easily with Bower, and the WebIntent Android plugin for Cordova 和名为 File:

的 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>

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

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

如果您需要 "feed" 您的应用程序和给定的文件，就像在我的应用程序中一样，您需要检索文件的 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 File plugin, in four different ways (as Text, as DataURL, BinaryString, ArrayBuffer), with the function cordovaFile.readAs<theWayYouWant>(path, file) (you get a Promise); 从您的文件中读取数据。例如，这里我需要数据作为二进制字符串：

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

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

我需要我的 Ionic 应用程序来获取特定的 xlsx 文件运行

I need my Ionic app to get a specific xlsx file to run

android

xlsx

angularjs

ionic-framework

ionic

我需要我的 Ionic 应用程序来获取特定的 xlsx 文件 运行

I need my Ionic app to get a specific xlsx file to run

android

xlsx

angularjs

ionic-framework

ionic

我需要我的 Ionic 应用程序来获取特定的 xlsx 文件运行