Download JPEG,PNG,SVG for ejs-grid

[Dhanashri Tak]

As we have feature for other charts to download JPEG,PNG and SVG. 

How to download JPEG,PNG and SVG for ejs-grid?

[Praveenkumar Gajendiran]

Hi Dhanashri,

Thanks for contacting Syncfusion support. 

We checked your query, based on that we would like to inform you that by default in EJ2 Grid, we have the support for the Print and Export option in the Grid. Please refer the below document for more information on this.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/print/
                              https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/
                              https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/

We are not able to clearly understand your requirement from the provided information, So we need the following details to understand the query better at our end. So kindly share the following details.  

1. In your update, you have mentioned that “download JPEG,PNG and SVG for ejs-grid”, let us know do you want to download the Grid row’s in JPEG,PNG format?
2. Or do you want to download the image’s in the Grid row’s in JPEG,PNG format?
3. Please elaborate on your exact requirement with more details, if possible share a video demonstration or pictorial representation to understand your query better.

Please get back to us with the requested details which will be helpful for us to validate your exact requirement at our end and provide the solution as early as possible 

Regards 

Praveenkumar G 

[Dhanashri Tak]

Hi  Praveenkumar,

Like in syncfusion chart we have options to print in different format using code,

 args.chart.exportModule.export('PNG', 'export');

 args.chart.exportModule.export('SVG', 'export');

 args.chart.exportModule.export('JPEG', 'export');

 args.chart.exportModule.export('PDF', 'export');

https://ej2.syncfusion.com/angular/documentation/chart/chart-print/

Like this how we can export ejs-grid chart in JPEG,PNG,SVG format.

[Praveenkumar Gajendiran]

Hi Dhanashri,

Thanks for your update.

Currently we are checking the feasibility of your requirement at our end. We will provide the further details on August 19, 2021. We appreciate your patience until then.  

Regards,  

Praveenkumar G 

[Joseph Christ Nithin Issack]

Hi Dhanashri, 

   Sorry for the inconvenience caused. 

    Currently we are preparing a the custom sample by using the worksheet and blob to convert into an image for exporting the grid to .png format. We will provide further details on 24^th August 2021. We appreciate your patience until then. 

Regards, 

Joseph I. 

[Rajapandi Ravi]

Hi Dhanashri, 

Thanks for your patience. 

We have validated your requirement and found that height and width limitation in the browser. So, we are unable to download the large Grid data(rendered excessive DOM size ) in png/jpeg format. Because you can bound the large amount of data into the Grid component (rendered excessive DOM size ). So, it is not feasible to download Grid data in png/jpeg format. 

But if you want to export less amount of data, you can use the following workaround solution. 

 

Note : this solution is working only less amount of data. if you try to export large amount of data, then downloaded image is automatically cut-off based only browser height and width limitation. This is default behavior of browser. 

1)      You need to install ‘html2canvas’ package in your application. Please find the documentation for your reference 

https://www.npmjs.com/package/html2canvas  

 

2)       Or, add ‘html2canvas’ package in your package.json and run the npm install command. For example 

 

  "dependencies": { 

. . . 

    "@angular/core": "12.1.0", 

    . . . 

    "@syncfusion/ej2-angular-base": "19.2.55", 

         . . . 

    "@syncfusion/ej2-grids": "19.2.56", 

. . . 

    "html2canvas": "^1.3.2", 

 

 

You can achieve your requirement by using below code example 

 

[app.component.html] 

 

<div> 

        <select name="selectIndex" class='e-cus' autocomplete="off" id="exporttype" > 

                         <option value="JPEG" >JPEG</option> 

                         <option value="PNG">PNG</option> 

                     </select> 

 

        <button ejs-button class="e-control e-btn e-lib e-info e-cus" (click)='downloadImage($event)' id="togglebtn">EXPORT</button> 

    </div> 

 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

. . . 

        </e-columns> 

    </ejs-grid> 

    <div id="download"> 

        <img #canvas> 

        <a #downloadLink></a> 

    </div> 

</div> 

 

 

[app.component.ts] 

 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; 

import { data } from './data'; 

. . . 

import html2canvas from 'html2canvas'; 

 

@Component({ 

  selector: 'app-root', 

  templateUrl: 'app.component.html', 

  styleUrls: ['./app.component.css'] 

}) 

export class AppComponent { 

  public data: Object[]; 

  public pageSettings: Object; 

  public canvasImg: any; 

 

  @ViewChild('grid') grid: GridComponent; 

  @ViewChild('canvas') canvas: ElementRef; 

  @ViewChild('downloadLink') downloadLink: ElementRef; 

  ngOnInit(): void { 

    this.data = data.slice(0, 30); 

    this.pageSettings = { pageCount: 5 }; 

    //this.canvasImg = html2canvas(); 

  } 

 

  downloadImage(eve) { 

    this.grid.showSpinner(); 

    const gObj: GridComponent = this.grid; 

    const element1: HTMLElement = createElement('div', { 

      id: this.grid.element.id + '_cus', 

      className: gObj.element.className + ' e-cus-grid' 

    }); 

    element1.classList.remove('e-gridhover'); 

    document.body.appendChild(element1); 

    const gridObj: any = new Grid({ 

      dataSource: this.grid.dataSource, 

      columns: this.grid.columns, 

      allowPaging: false, 

      query: this.grid.getQuery(), 

      dataBound: function(args) { 

        html2canvas(gridObj.element, { 

          // width: 3000, 

          // height: 3000 

        }).then(canvas => { 

          this.canvas.nativeElement.src = canvas.toDataURL(); 

          let exportType = document.getElementById('exporttype').value; 

          this.downloadLink.nativeElement.rel='nofollow' href = canvas.toDataURL( 

            'image/' + exportType 

          ); 

          this.downloadLink.nativeElement.download = 'tbl.' + exportType; 

          this.downloadLink.nativeElement.click(); 

          gridObj.destroy(); 

          document.getElementById(this.grid.element.id + '_cus').remove(); 

          this.grid.hideSpinner(); 

        }); 

      }.bind(this) 

    }); 

    gridObj.appendTo(element1); 

  } 

} 

 

 

Please find the sample for your reference. 

Sample : https://stackblitz.com/edit/angular-hfs55n-yhm9dn?file=app.component.html  

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R