Export Flex grid to Excel using JSZip in Webpack

Export Flex grid to Excel using JSZip in Webpack

Posted by: muhammad-hassan on 14 September 2017, 11:50 am EST

• 

  muhammad-hassan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:50 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

• 

  benjamin-runnels

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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?

• 

  benjamin-runnels

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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)

• 

  benjamin-runnels

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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

• 

  benjamin-runnels

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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

• 

  benjamin-runnels

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  Hi,
  
  Thank you for sharing information here.

  Thanks,
  
  Manish Kumar Gupta

• 

  rob-ferguson

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

  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

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:50 am EST

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

  Thanks,
  
  Manish Kumar Gupta

• 

  productinfo

  • Post Options:
  • Link
    Copy

  Posted 4 October 2017, 8:16 am EST

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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 October 2017, 1:47 am EST

  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