CODEWITHSUNDEEP
javascriptnode.jsember.js
Russ
Russ

Reputation: 81

Using ember-cli-sheetjs in an ember component

I'm creating a website using ember and am currently having difficulty using the 'ember-cli-sheetjs' module in a component titled 'add-student.js'. I cannot seem to call any functions in the documentation using my current code.

To get the module in ember I added it to my dev dependencies inside package.json and then ran the "npm install" command which successfully installed the "ember-cli-sheetjs" module. I then try and use it by writing:

    import Ember from 'ember';
    import xlsx from 'npm:ember-cli-sheetjs';
    //have also tried directly using the sheetjs module after 
    //installing sheetjs with the command
    //npm install xlsx --save-dev
    //import xlsx from 'npm:xlsx';

    export default Ember.Component.extend({
       fileinput: null, //this is set with an input handler in the hbs

    actions: {
       fileLoaded: function() {
          console.log(this.get('fileinput')); //properly outputs the file name
          var workbook = xlsx.readFile(this.get('fileinput'));
       },
    }

However this results an error saying:

add-student.js:134 Uncaught TypeError: _npmEmberCliSheetjs.default.readFile is not a function

I feel like the problem is that its not following the correct path to the function (which exists in the function documentation). If anyone can tell me what I'm doing wrong it would be a huge help.

Link to the module: https://www.npmjs.com/package/ember-cli-sheetjs

Upvotes: 1

Views: 275

Answers (2)

Stéphane Bruckert
Stéphane Bruckert

Reputation: 22903

Use Bower

// bower.json
"dependencies": {
    "js-xlsx": "^0.11.5"
}

// ember-cli-build.js
module.exports = function(defaults) {
    app.import('bower_components/js-xlsx/dist/xlsx.min.js');
}

and in your component as @Russ suggested:

import Ember from 'ember';
/* global XLSX */

Upvotes: 1

Russ
Russ

Reputation: 81

If anyone runs into this problem I have figured out a work around.

First in your index.html include the line:

<script src="assets/parsing/dist/xlsx.full.min.js"></script>

Next create a folder inside public (if it doesn't already exist) called assets. Next create a folder inside assets called 'parsing' and a folder in 'parsing' called 'dist'. Next in 'dist' create a file called 'xlsx.full.min.js'.

Next copy and paste the code from: https://raw.githubusercontent.com/SheetJS/js-xlsx/master/dist/xlsx.full.min.js into the xlsx.full.min.js file.

Finally, in whatever component you want to use the sheetjs module in just put the following below your import statement:

/* global XLSX */

This is a work around but it does allow you to use the sheetjs module.

Upvotes: 1

Related Questions