How to export grid data without having to save it to a file first

[Pat Buchanan]

Good afternoon!  We are considering purchasing the product but are currently exploring its capabilities.  One of the items I have not been able to get to work is finding a way to export grid data and have it open immediately, without having to save it to the drive first.  The PDF opening up in the default PDF viewer, and the Excel file opening directly in Excel.

Is this possible?

[Pavithra Subramaniyam]

Hi Pat, 

 

Thanks for your interest in Syncfusion product. 

 

In Essential JavaScript 2, the PDF can be viewed in browser directly by saving PDF to the Blob and then using the blob data to open the PDF in new tab. In Grid Pdf Export you can get the blob data in the ‘pdfExportComplete’ event. Please refer to the below code example and sample link for more information. 

 

[index.jsx] 

export class Exporting extends SampleBase { 

         

        pdfExpComplete = (args) => { 

            //This event will be triggered when pdf exporting. 

            args.promise.then((e) => { 

                //In this `then` function, we can get blob data through the arguments after promise resolved. 

                var blobURL = URL.createObjectURL(e.blobData); 

                window.open(blobURL); 

            }); 

        }; 

        toolbarClick(args) { 

            switch (args.item.text) { 

                case 'PDF Export': 

                    // pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) 

                   // if ‘isBlob’ is set as true then it will return blob data 

                    this.gridInstance.pdfExport(null, null, null, true); 

                    break; 

                 

            } 

        } 

        render() { 

            return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent dataSource={orderDetails} ref={grid => this.gridInstance = grid} toolbar={this.toolbarOptions} allowPaging={true} allowExcelExport={true} allowPdfExport={true} toolbarClick={this.toolbarClick.bind(this)} pdfExportComplete={this.pdfExpComplete.bind(this)}> 

                        <ColumnsDirective> 

                          .  .  . 

                        </ColumnsDirective> 

                        <Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group]} /> 

                    </GridComponent> 

                </div> 

            </div>); 

        } 

    } 

 

    render(<Exporting />, document.getElementById('sample')); 

 

Documentation: https://ej2.syncfusion.com/documentation/grid/how-to/exporting-grid-in-cordova-application/  

 

Sample               : https://stackblitz.com/edit/react-nxuvcx-tydbog?file=index.js  

 

For Excel Exporting could you please share the details whether you want to view the file in MS Excel or any web viewer. This information will be helpful for us to provide a better solution as early as possible.  

 

Regards, 

Pavithra S.