
# excel export

Convert the dataset to an Excel file according to the column structure displayed in the current grid and save it as a local file or upload it to the server.

`※ The jszip library is required to use the export function.`

```js
<script src="/scripts/jszip.min.js"></script>
```

#### Excel export

Exports the appearance and data of the current grid to an external document according to the settings specified with the [exportGrid()](/refs/Class/GridBase#exportgrid) function.

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Address', dataType: 'text' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Address', fieldName: 'Address', width: '200', header: { text: 'Address' }, styleName: 'left-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 50
  },
  display: {
    rowHeight: 30,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function excelExport() {
  const excelType = Boolean(document.querySelector('input[name="excelType"]:checked').value);
  const showProgress = document.getElementById('chkShowProgress').checked;
  const indicator = document.querySelector('input[name="indicator"]:checked').value;
  const header = document.querySelector('input[name="header"]:checked').value;
  const footer = document.querySelector('input[name="footer"]:checked').value;

  gridView.exportGrid({
    type: 'excel',
    target: 'local',
    fileName: 'gridExportSample.xlsx',
    showProgress: showProgress,
    progressMessage: 'Exporting to Excel.',
    indicator: indicator,
    header: header,
    footer: footer,
    compatibility: excelType,
    done: function () {
      alert('done excel export');
    }
  });
}
```

Specify whether to include the area in the document.

-   default - Prints as is currently displayed in the grid.
-   visible - The output includes the relevant area unconditionally.
-   hidden - Do not include unconditionally.
    In the [GridExportOptions](/refs/Interface/GridExportOptions) API document, you can check the setting model specified when exporting the grid displayed on the screen to an external document such as Excel.

```js
var excelType = Boolean(
    document.querySelector('input[name="excelType"]:checked').value
);
var showProgress = document.getElementById("chkShowProgress").checked;
var indicator = document.querySelector('input[name="indicator"]:checked').value;
var header = document.querySelector('input[name="header"]:checked').value;
var footer = document.querySelector('input[name="footer"]:checked').value;

gridView.exportGrid({
    type: "excel",
    target: "local",
    fileName: "gridExportSample.xlsx",
    showProgress: showProgress,
    progressMessage: "Exporting to Excel.",
    indicator: indicator,
    header: header,
    footer: footer,
    compatibility: excelType,
    done: function () {
        //Function to be executed after export is complete
        alert("done excel export");
    },
});
```

#### Remote Excel export

If you want to send Excel data to the server and download it from the server, you can specify target: "remote", url: "server processing address".
JAVA MVC Project sample files can be downloaded from the link below.

[Remote Export Sample](/public/excelremote.zip)

```js
//Client
gridView.exportGrid({
    type: "excel",
    target: "remote",
    url: "/remote/ExcelXBin",
    fileName: "gridExportSample.xlsx",
});
```

```java
package com.realgrid.remote;

import java.io.OutputStream;
import java.util.Base64;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class ExcelXBin {
    @RequestMapping(value="/ExcelXBin", method=RequestMethod.POST)
    public void excelXBin(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // Receive
        String fileName = request.getParameter("fileName");
        String data = request.getParameter("data");

        if (data.length() > 0) {
        // Decode
        byte[] filedata = Base64.getDecoder().decode(data);

        // Response Header
        response.addHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
        response.addHeader("Content-Type","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.addHeader("Pragma", "no-cache");

        //Write
        OutputStream os = response.getOutputStream();
        os.write(filedata);
        os.flush();
        }
    }

}
```
