我需要我的应用程序离子得到一个特定的XLSX文件即可运行 [英] I need my Ionic app to get a specific xlsx file to run

问题描述

您好人Stackverflow的！

Hello people of Stackverflow!

我开发一个小的Andr​​oid应用它的目的是读取.xlsx文件，并在一定的形式（酒吧/甜甜圈图表）显示其数据。由于我没有去学习一切我需要的Java和Android时间的我使用的是科尔多瓦和放大器;离子框架以做到这一点。我是pretty新的这些（也pretty新AngularJS），但我已经习惯了code在JavaScript中，并已$ C $光盘的NodeJS。

I'm developing a small Android app which purpose is to read an .xlsx file and display its data in a certain form (bar/doughnut charts). As I don't have the time to learn everything I need in Java and Android I'm using Cordova & Ionic framework to do it. I'm pretty new to these (also pretty new to AngularJS) but I'm used to code in JavaScript, and already coded with NodeJS.

到目前为止，我已经成功地创建一个简单的图，该读取并显示我创建并直接保存在我的JavaScript /角code伪数据，使用的 Highcharts库。但现在我想用真实的数据我得到了，但卡住两个主要问题：

So far I've managed to create a simple view which reads and display dummy data I created and stored directly in my Javascript/Angular code, using the Highcharts library. But now I want to use real data I got, but get stuck on two major problems:

• 首先，将由我的离子的应用程序使用的文件是不直接的Andr​​oid设备的文件系统上存储的一个文件，但通过在其信箱的用户接收。我不知道如何让我的应用程序被检测为能打开这样的文件（让试图从他的信箱打开.xlsx文件时，用户可以选择的话）配置意图过滤器


• 其次，当用户选择我的应用程序打开XLSX文件了，我怎么设法找回我的JS code中的文件？请注意，我已经找到 我将使用来自于我的.xlsx文件中提取信息库JSON格式，并且已经对如何治疗之后这些数据的想法。

• first of all, the file that will be used by my Ionic app is not a file stored directly on the Android device file system, but received by the user on its mail box. I don't understand how to configure intent-filter so my app is detected as capable to open such files (so that the user can choose it when trying to open an .xlsx file from his mail box)
• secondly, when the user select my app to open an xlsx file, how do I manage to retrieve the file in my JS code? Note that I already found the library I'll use to extract information from my .xlsx file in a JSON format, and already have ideas on how to treat those data afterwards.

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

I'll keep this topic updated if you need more info.

推荐答案

我已经成功地回答我自己的问题，这要部分归功于Randyka Yudhistira为第一个。

I've managed to answer my own questions, partly thanks to Randyka Yudhistira for the first one.

首先，为了使您的应用程序被检测为能够打开XLSX档案，你必须编辑其AndroidManifest.xml中。在离子的应用程序，该文件位于： YO​​UR_APP /平台/安卓/ AndroidManifest.xml中。添加以下意图过滤器内的＆LT;活性GT; 部分（再次感谢这个，Randyka Yudhistira）：

First of all, in order that your app is detected as capable of opening XLSX files, you have to edit its AndroidManifest.xml. In a Ionic app, this file is located at: YOUR_APP/platforms/android/AndroidManifest.xml. Add the following intent-filter inside of the <activity> section (thanks again for this, 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插件 ，您可以用鲍尔轻松安装，并且 WebIntent Android插件的科尔多瓦并ngCorodva插件命名文件

Secondly, to open and read the XLSX file and extract the data from it, you'll need the ngCordova plugin, that you can install easily with Bower, and the WebIntent Android plugin for Cordova and ngCorodva plugin named File:

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

参考ngCordova在HTML文件（参考科尔多瓦LIB前）：

Reference ngCordova in your HTML file (before the reference to the cordova lib):

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

和您的角模块中注入它作为一个角度依赖性：

And inject it as an Angular dependency in your angular module:

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

如果您需要在我的应用程序来喂你的应用程序与给定的文件一样，您需要检索文件的URL。要做到这一点，在你离子控制器上添加服务 $ cordovaFile 和 $ ionicPlatform ，并使用webintent插件作为遵循得到URI到文件：

If you need to "feed" your app with a given file, like in my app, you need to retrieve the URL of the file. To do so, in your Ionic controller, add the services $cordovaFile and $ionicPlatform, and use the webintent plugin as follow to get the URI to your file:

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
        }
      }
    }
  });
}

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

To open the file and read its data, you'll need to separate the path to your file from the name of the file:

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

最后，你可以从与科尔多瓦文件插件您的文件中读取数据，四种不同的方式（如文本，DataURL，BinaryString，ArrayBuffer），用功能 cordovaFile.readAs＆LT; theWayYouWant＆GT;（路径，文件）（你得到的无极）;这里有个例子我所需要的数据作为二进制字符串：

Finally, you can read the data from your file with the 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); here for example I needed the data as a binary string:

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

希望这个答案将有助于挣扎谁像我这样的人，从一个应用程序离子的文件打开和读取数据： - ）

Hope this answer will help people who struggled like me to open and read data from a file in a Ionic App :-)

这篇关于我需要我的应用程序离子得到一个特定的XLSX文件即可运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！