1

I'm trying to use the xlsx.js library of cdnjs in a Lightning component. (https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js). I downloaded the js file and addit as an static resource but in the code when I try to use the XLSX object, always get an "undefined" error.

The resource always has the text/plain MIME Type, so I don't know if the problem is that SF cannot detect that is a java script file.

for the component I'm using the next syntaxis to get the file:

<ltng:require scripts="/resource/JsLibXlsx"
              afterScriptsLoaded="{!c.jsLoaded}"/>

in the controller just for verify the process I have this:

jsLoaded: function(component, event, helper) {
    alert('versión 7');
    try{
        var xls = new XLSX();
        alert(xls);
    }
    catch(ex){
        alert(ex);
    }

}

alert shows

alert error any ideas for this issue?

Thanks.

3

First, make sure you're using the $Resource value provider. Second, make sure that your Static Resource is using the text/javascript mime type. Not all browsers support using text/plain files as JavaScript, since this is a potential security issue. Third, check your console for any load errors (press F12 to view the console). It's possible that XLSXJS might simply not be compatible with Lightning Locker Service at this time.

  • hi @sfdcfox. in F12 console there are no 404 or javascript errors but the one that I showed in the question. In fact in the mime type we have test/palin, but in the configuration I have no option to change it to test/javascript. I already try to copy all the text of the js library and paste it in a new static resource from developer console (where I can use the right mime type) but it keeps saving and never ends this process. Just for the record... the library works fine in a visualforce page. – Piojo Nieto Jul 28 '17 at 20:42
  • 1
    if anyone needs this information, after a long research, I saw that the problem is that SF doesn't use the file as a js library but a text file. if I use $Resource I get the next error on browser console: Refused to connect to 'ccrenew--zagadevsb.cs43.my.salesforce.com/one/…' because it violates the following Content Security Policy directive: "connect-src 'self' api.bluetail.salesforce.com preprod.bluetail.salesforce.com cs43.salesforce.com staging.bluetail.salesforce.com *.cs43.visual.force.com". As I see the library is not compatible – Piojo Nieto Jul 28 '17 at 22:55
  • @PiojoNieto Did you found any other solution to read xlsx file in lightning component? – Muzammil Bajaria Dec 1 '17 at 9:02
2

So, to make your XSLX library work, several things need to be done:

  1. Download XLSX.js - full library is more preferable, since you'll need to modify sources a bit.
  2. Open XLSX.js and right after the line

    var XLSX = {};

    (for me it was 5th line), add this line of code:

    window.XLSX = XLSX;

  3. Load modified library file as a static resource and reference it in your component as you would do with any other js library:

    <ltng:require scripts="{!$Resource.XLSX"}/>

  4. Library variable will be available in controller methods as XLSX. E.g.

    readFile: function (component, event) {
        var file = event.getSource().get("v.files")[0];
        var reader = new FileReader();
        reader.onloadend = function(e) {
            XLSX.read(e.target.result);
        };
        reader.readAsArrayBuffer(file);
    }
    

Explanation: by default, XLSX library inside the XLSX.js file is simply referenced as:

var XLSX = {};

In ordinary js this would be considered as a global variable, but lightning locker service encloses each library in a Proxy object, so that the library lives in it's own context. However, proxy object leaves direct references to window global context, if there were any. We simply explicitly order locker service to leave a reference to XLSX object in global window context for us.

Source: experience.

Additions: standard XLSX.js library doesn't include gzip library. So if you are not going to add it separately, you should modify and use xlsx.full.min.js. Basically, you should do the same thing as was described before, but for minified version of the library.

  • This is the right solution. xlsx library is not yet Locker service compatible as suggested by @sfdcfox. What needs to be done is modify xlsx.js as suggested by Alex Fisher and you would also find jszip.js also in the same dist folder where you have xlsx.js. Add that also like below and then it would work like a charm. Thanks to Alex Fisher <ltng:require scripts='/resource/jszip,/resource/XLSX_To_JSON' afterScriptsLoaded="{!c.scriptsLoadedHandler}" /> – aham_punitam Mar 31 '19 at 18:59
  • <ltng:require scripts='/resource/jszip,/resource/XLSX_To_JSON' afterScriptsLoaded="{!c.scriptsLoadedHandler}" /> – aham_punitam Mar 31 '19 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.