3

My requirement is to zip the content in client side controller using javascript library JSZIP, i have included it as a static resource. Below is the code.

Component:

<aura:component >

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

</aura:component>

Controller:

({
    onPress : function(component) {
        var packageXml = '<?xml version="1.0" encoding="UTF-8"?>' + 
            '<Package xmlns="http://soap.sforce.com/2006/04/metadata">' +
            '<version>35.0</version>' +
            '</Package>' ;

        var zipFile = new JSZip();
        zipFile.file('package.xml',packageXml,{base64: 'true'});
        var data = zipFile.generate();
        alert(data);
    }
})

I click on Press button, while locker service is enabled I am facing issue and when Locker service disabled the alert is showed as expected (attached the outputs).

Locker service enabled: enter image description here

Locker service disabled: enter image description here How to make this work when locker service is enabled. Thank you for help.

The error is very cryptic and not helpful

enter image description here

1

You just forgotten to declare the variable zipFile, change the line

zipFile = new JSZip();

to this line:

var zipFile = new JSZip();

also I will recommend you to use the Salesforce Lightning CLI to check this kind of issues, its a heroku command line tool that check for this errors.

Follow this steps to install Salesforce Lightning CLI: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/cli_intro.htm


UPDATE: In my personal org I tested the code you provided with a few modifications in an aura application and it worked fine. Here is the code:

App:

<aura:application >
    <ltng:require scripts="/resource/jszip/jszip.min.js" afterScriptsLoaded="{!c.onPress}"/>
</aura:application>

Js controller:

  ({
        onPress : function(component) {
            var packageXml = '<?xml version="1.0" encoding="UTF-8"?>' + 
                '<Package xmlns="http://soap.sforce.com/2006/04/metadata">' +
                '<version>35.0</version>' +
                '</Package>' ;

            var zipFile = new JSZip();
            zipFile.file('package.xml',packageXml,{base64: 'true'});
            var data = zipFile.generateAsync();
            alert(data);
        }
    })

I downloaded the last version (3.0.0) of jszip from their site and had the issue that the method generate() is deprecated, so I changed it to generateAsync() as is suggested in the upgrade guide.

  • Hi Cruz, the issue still exists even after adding the line you mentioned. – Pradeep Chary Aug 1 '16 at 4:02
  • First I recommend you to use the Salesforce Lightning CLI to check and fix all similar issues like this, maybe there is other code that has the same issue. I tried to test your code in my person al org and I make it work, I will update my response. – D. Cruz Aug 1 '16 at 12:39
  • Thank you for your support. It worked with (3.0.0) version of jszip. { onPress : function(component,event,helper) { var packageXml = '<?xml version="1.0" encoding="UTF-8"?>' + '<Package xmlns="soap.sforce.com/2006/04/metadata">' + '<version>35.0</version>' + '</Package>' ; var data; var zipFile = new JSZip(); zipFile.file('package.xml',packageXml); zipFile.generateAsync({type:"base64"}).then(function(content) { helper.contentMethod(component,content); }); }, } – Pradeep Chary Aug 4 '16 at 7:44
1

I have found the right fix for this problem.

Open the downloaded source JSZip.js (minified version also should be ok) and find near the top of the file the next string:

"g.JSZip = f()"

change it to:

"window.JSZip = f()"

upload this source and have fun. That's it

some explanation:

This string is the part of a dependency header generated by Browserify, and if you follow the logic, you will see environments checks of whether it is Node.js, or browser or so.

At the end it looks like the following:

... else {
    var g;
    if (typeof window !== "undefined") {
        g = window;
    } else ...
    ...
    g.JSZip = f();
}
...

In Lightning under the LockerService, "window" is a secured object, and things like

g = window;
g.blabla = something;

do not work, you have to assign directly to window properties:

window.blabla = something;

The same way you may fix other libraries.

  • 1
    Currently having the same problem with the latest version of JSZip. Its just not compiling in a lightning component. Do you happen to have the version you modified in case I did something wrong or is it working with you currently? – P. Lapointe Mar 5 at 21:38
  • Hi, I've modified and am using now JSZip version 3.1.5. And, as stated, the only change was "window.JSZip = f()" It might be, newer versions of the library have other incompatibilities. I recommend you to copy-paste the library contents into some text/javascript Salesforce resource in the Developer Console to see what errors it reports. With LockerService I had number of troubles, e.g. in some regular expressions the * at the end is transformed into unicode symbol by some reason, so had to change expressions. Or just try to use JSZip version 3.1.5 – Den Volokhovskyi Jun 3 at 13:25

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.