Author Topic: How to use Export Function using FileSaverJs file  (Read 5834 times)

megastream

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 23
    • View Profile
How to use Export Function using FileSaverJs file
« on: March 30, 2018, 06:29:10 pm »
Hi,

I want to use Filesaver.js in Html file using to export data in different 2 format, Also i have used this in my script but it is showing me an error like "(index):Uncaught ReferenceError: saveAs is not defined" , Here is below script for check:

<script src="FileSaver.js"></script>
<script>
   $(function () {
        var interval;

        function saveChanges() {
         if (grid.saveEditCell() === false) {
                return false;
            }
            if (grid.isDirty() && grid.isValidChange({ focusInvalid: true }).valid) {
            
                var gridChanges = grid.getChanges({ format: 'byVal' });
                $.ajax({
                    url: 'products.php?pq_batch=1',
                    data: {
                        list: JSON.stringify( gridChanges )
                    },
                    dataType: "json",
                    type: "POST",
                    async: true,
                    beforeSend: function (jqXHR, settings) {
                        grid.option("strLoading", "Saving..");
                        grid.showLoading();
                    },
                    success: function (changes) {
                        //commit the changes.               
                        grid.commit({ type: 'add', rows: changes.addList });
                        grid.commit({ type: 'update', rows: changes.updateList });
                        grid.commit({ type: 'delete', rows: changes.deleteList });
                  // grid.history({ method: 'reset' });
                  //grid.history({ method: 'reset' });
                    },
                    complete: function () {
                        grid.hideLoading();
                        grid.option("strLoading", $.paramquery.pqGrid.defaults.strLoading);
                    }
                });
            }
        }
       
      //save changes from a timer.
        interval = setInterval(saveChanges, 1000);

        var obj = {
            hwrap: false,
            resizable: true,
            rowBorders: false,
            autoRow: false,
            rowHt: 32,
            trackModel: { on: true }, //to turn on the track changes.           
            toolbar: {
                items: [{
                    type: 'button',
                    icon: 'ui-icon-plus',
                    label: 'New Product',
                    listener: function () {
                        //append empty row at the end.                           
                       var rowData = { Status: 'Published', Page:''}; //empty row
                        var rowIndx = grid.addRow({ rowData: rowData });
                        grid.goToPage({ rowIndx: rowIndx });
                        grid.editFirstCellInRow({ rowIndx: rowIndx });
                    }
                },
              {
                    type: 'select',
                    label: 'Format: ',               
                    attr: 'id="export_format"',
                    options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
                },
                {
                    type: 'button',
                    label: "Export",
                    icon: 'ui-icon-arrowthickstop-1-s',
                    listener: function () {

                        var format = $("#export_format").val(),                           
                            blob = this.exportData({
                                //url: "/pro/demos/exportData",
                                format: format,                               
                                render: true
                            });
                        if(typeof blob === "string"){                           
                            blob = new Blob([blob]);
                        }
                        saveAs(blob, "pqGrid."+ format );
                    }
                },

Please provide solution regarding this.
Thanks

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: How to use Export Function using FileSaverJs file
« Reply #1 on: March 30, 2018, 10:10:54 pm »
Local export functionality requires both jszip and filesaver.js

https://plnkr.co/edit/zh5do1Uf0KmGE8I6zfKw?p=preview

seb

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: How to use Export Function using FileSaverJs file
« Reply #2 on: November 15, 2018, 09:45:48 pm »
I have included all libraries in my ParamQuery5.5.0 release, but the saveAs() function is undefined.

Also, there is no filesaver.js file in the jsZip-2.5.0 folder anymore.

Thanks,
seb

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: How to use Export Function using FileSaverJs file
« Reply #3 on: November 15, 2018, 11:59:14 pm »
filesaver.js is not in the SDK.

It's downloadable from the github.

https://github.com/eligrey/FileSaver.js/releases