Reading .xslsx and transform into a unique .json file

Jérém

unread,

Mar 5, 2015, 5:04:20 AM3/5/15

to ang...@googlegroups.com

Hello all,

I'm currently working on a Angular Reader of a batch of .xslx files and convert them into a unique .json file :) I found this code wich is pretty nice, but i don't really know how to modify this one to get an automatique selection of all files without putting them in a <input>

Thank you for your help.

Jerem'

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>XLSX</title>
    <link rel="stylesheet" type="text/css" href="package/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="package/prism.css">
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{display:none;}ng\:form{display:block;}</style></head>

<body>
    <div ng-app="App" class="container ng-scope">
        <div class="ng-scope" ng-controller="PreviewController">
            <h4>XLSX Reader demo</h4>
            <form class="ng-pristine ng-invalid ng-invalid-required" action="" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="excel_file">Excel File</label>
                    <input name="excel_file" accept=".xlsx" onchange="angular.element(this).scope().fileChanged(this.files);" required="true" type="file">
                </div>

                <div class="checkbox">
                    <label>
                        <input class="ng-pristine ng-valid" ng-model="showPreview" ng-change="showPreviewChanged();" type="checkbox">Show preview of excel file
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input checked="checked" class="ng-pristine ng-valid" ng-model="showJSONPreview" type="checkbox">Show JSON preview of selected sheet
                    </label>
                </div>
                <div style="display: none;" ng-show="isProcessing">
                    <span>Processing ...</span>
                </div>

                <div class="form-group">
                    <label for="sheet_name">Sheet Name</label>
                    <select id="sheet_name" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-change="updateJSONString()" ng-model="selectedSheetName" required="required" ng-required="true" ng-options="sheetName as sheetName for (sheetName, sheetData) in sheets"><option selected="selected" class="" value="">---- Select a sheet ----</option></select>
                </div>

                <input name="sheet_name" value="" type="hidden">

                <input value="Submit" type="submit">

                <div ng-show="showJSONPreview">
                    <h4>JSON Preview of selected sheet</h4>
                    <pre class="langauge-javascript">                        <code class="ng-binding"></code>
                    </pre>
                </div>
                <div style="display: none;" ng-show="showPreview">
                    <!-- ngRepeat: (sheetName, sheetData) in sheets -->
                </div>
            </form>
        </div>
    </div>


<script type="text/javascript" src="package/angular.js"></script>
<script type="text/javascript" src="package/jquery.js"></script>
<script type="text/javascript" src="package/bootstrap.js"></script>
<script type="text/javascript" src="package/lodash.js"></script>
<script type="text/javascript" src="package/jszip.js"></script>
<script type="text/javascript" src="package/xlsx.js"></script>
<script type="text/javascript" src="package/xlsx-reader.js"></script>

<script type="text/javascript">
var app = angular.module("App", []);

app.factory("XLSXReaderService", ['$q', '$rootScope',
    function($q, $rootScope) {
        var service = function(data) {
            angular.extend(this, data);
        }

        service.readFile = function(file, readCells, toJSON) {
            var deferred = $q.defer();

            XLSXReader(file, readCells, toJSON, function(data) {
                $rootScope.$apply(function() {
                    deferred.resolve(data);
                });
            });

            return deferred.promise;
        }


        return service;
    }
]);

app.controller('PreviewController', function($scope, XLSXReaderService) {
    $scope.showPreview = false;
    $scope.showJSONPreview = true;
    $scope.json_string = "";

    $scope.fileChanged = function(files) {
        $scope.isProcessing = true;
        $scope.sheets = [];
        $scope.excelFile = files[0];
        XLSXReaderService.readFile($scope.excelFile, $scope.showPreview, $scope.showJSONPreview).then(function(xlsxData) {
            $scope.sheets = xlsxData.sheets;
            $scope.isProcessing = false;
        });
    }

    $scope.updateJSONString = function() {
        $scope.json_string = JSON.stringify($scope.sheets[$scope.selectedSheetName], null, 2);
    }

    $scope.showPreviewChanged = function() {
        if ($scope.showPreview) {
            $scope.showJSONPreview = false;
            $scope.isProcessing = true;
            XLSXReaderService.readFile($scope.excelFile, $scope.showPreview, $scope.showJSONPreview).then(function(xlsxData) {
                $scope.sheets = xlsxData.sheets;
                $scope.isProcessing = false;
            });
        }
    }
});
</script>

</body></html>

Jérém

unread,

Mar 16, 2015, 5:04:39 AM3/16/15

to ang...@googlegroups.com

No ideas ?

Sander Elias

unread,

Mar 16, 2015, 8:41:52 AM3/16/15

to ang...@googlegroups.com

Hi Jérém

If you do not receive an answer to your question, it might be a good idea to refrase/restate it. Also adding a plunk increases you change of getting an answer.

Make the plunk the smallest possible sample of what your question is.

Regards

Sander

Reply all

Reply to author

Forward