Export Flex grid to Excel using JSZip in Webpack

Originally Posted 7 December 2016, 6:06 am EST

  • Originally Posted 7 December 2016, 6:06 am EST

    Hi,

    We are using Flex grid with angular2 in Webpack. Data is populated in Flex grid, need to be exported in Excel.
    When export is applied it says Jszip is required.

    Question is, how we can include jszip in webpack project of angular2, so that excel export for flex grid works smooth.

    Regards,
    M. Hassan
  • Reply

    I'm somewhat close I *think*. So to start I added to my package.json dependencies
    "jszip": "3.1.3"

    Then in my webpack.vendor.js under entry:
    'jszip'

    and under resolve I added an alias:
            alias: {
    jszip: 'jszip/dist/jszip.min.js'
    }



    And finally under module I added a noParse:
    noParse: [/jszip.min.js$/]
    This results in jszip getting added to my vendor.dll.js and I verified this by looking in the vendor.json file and found a jszip entry.

    Then in my component that has the exportExcelAsync() method I have
    import * as JSZip from 'jszip';

    This doesn't work for me though because I'm still getting this error which goes away if I add the script tag to my global index.html
    WjGridTestComponent.html:1 ERROR TypeError: h is not a constructor
    at Function.n._saveWorkbookToZip (wijmo.xlsx.js:13)
    at Function.n.saveAsync (wijmo.xlsx.js:13)
    at n.saveAsync (wijmo.xlsx.js:13)
    at Function.n.saveAsync (wijmo.grid.xlsx.js:13)


  • Reply

    I'm at the same point and thinking that adding a script tag to my html for the jszip file is not the "right way" to do things in a webpack/ng2 project. Did you ever get any additional information?
  • Marked as Answer

    Reply

    Hi,
    Thank you for sharing information here.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Okay, that works! Thank you!

    So to sum it up for anyone following along.

    Add this to the dependencies section of package.json
    "jszip": "3.1.3"

    Add this to the devDependencies section of package.json
    "script-loader": "^0.7.0"

    Add this app/vendor.ts:
    import 'script-loader!jszip/dist/jszip.min.js';

    That is all I needed to do and it gets added to the vendor.dll.js by webpack.



  • Reply

    Hi All,

    For this, you need to load JSZIP file using script loader in the project. For reference, please see the attached sample that implements the same and provides two methods for including JSZip in the project by our development team.

    *PS: For using LoadAsync method JSZip 3.0 required and for load() method 2.5 required.

    Thanks,
    Manish Kumar Gupta
    2017/05/FlexGrid_export_JSZIP_as_module.zip
  • Reply

    The strange thing is that in my module constructor I have:
            const zipFile = new JSZip();
    console.log(zipFile.loadAsync);



    and I get this
    function (data, options) {
    var zip = this;
    options = utils.extend(options || {}, {
    base64: false,
    checkCRC32: false,
    optimizedBinaryString: false,
    createFolders: false,…



    There is an assert check in wijmo.xlxs _saveWorkbookToZip method that does the same check so I don't know why the component works but wijmo is not.

  • Reply

    I can provide my webpack setup if that would help you understand my setup better. It is also okay for someone to contact me directly via email for additional information.
  • Reply

    Hi,
    This issue requires further investigation. Hence, this issue has been escalated to the concerned team for further investigation with tracking id WJ0003. We will let you know as soon as we get any update on this.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi,

    Add the following to the dependencies section of package.json
    "jszip": "^3.1.3"

    Add the following to the devDependencies section of package.json
    "script-loader": "^0.7.0"

    Add the following to /src/app/app.module.ts
    import 'script-loader!jszip/dist/jszip.min.js';

    Run:
    npm update

    Modify your code to use flexSheet.saveAsync(), flexSheet.loadAsync(), etc.

    Run:
    ng serve

    Open your browser and navigate to:
    http://localhost:8080

    See: https://robferguson.org/blog/2017/08/28/angular-cli-angular-4-and-wijmo-flexsheet/

    Cheers
    Rob
  • Reply

    Hi Rob,
    Thank you for sharing solution and blog post. This might help others in the future. :)

    Thanks,
    Manish Kumar Gupta
  • Reply

    Why you use flexSheet instead of flexGrid? And, why are you save asynchronously? and and ... why is this world so bad?
  • Reply

    Hi, Ozgur,
    If you are referring to the rob's blog, this is just a reference. You can exprot to the FlexGrid too. But for this, you need to use FlexGridXlsxConverter class's save/saveAsync method.

    The saveAsync method is used when you required performing some action after exporting Excel.

    ~Manish Kr Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels