
# Download image excel

ImageRenderer and iconRenderer are printed when downloading Excel.

```js
const fields = [
  { fieldName: 'imageUrl', dataType: 'text' },
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { 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: 'imageUrl',
    fieldName: 'imageUrl',
    width: '150',
    renderer: {
      type: 'image',
      imageField: 'imageUrl',
      imageHeight: 80,
      exportImage: true
    },
    header: {
      text: 'Image URL',
      styleName: 'orange-column'
    }
  },
  {
    name: 'imageUrl1',
    fieldName: 'Monetary',
    width: '150',
    renderer: {
      type: 'image',
      imageCallback: function (grid, cell) {
        var monetary = grid.getValue(cell.item.index, 'Monetary');
        return '/images/monetaryFlag/' + monetary + '.png';
      },
      imageHeight: 80,
      exportImage: true
    },
    header: {
      text: 'Image Callback',
      styleName: 'orange-column'
    }
  },
  {
    name: 'imageUrl2',
    fieldName: 'Monetary',
    width: '150',
    renderer: {
      type: 'image',
      imageMap: {
        'EUR': '/images/monetaryFlag/EUR.png',
        'USD': '/images/monetaryFlag/USD.png'
      },
      imageHeight: 80,
      exportImage: true
    },
    header: {
      text: 'Image Map',
      styleName: 'orange-column'
    }
  },
  {
    name: 'Monetary',
    fieldName: 'Monetary',
    width: '40',
    header: {
      text: 'Monetary'
    }
  },
  {
    name: 'Gender',
    fieldName: 'Gender',
    width: '80',
    header: {
      text: 'Gender'
    },
    renderer: {
      type: 'icon',
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return '/images/common/' + sex + '.png';
      },
      iconHeight: 15,
      iconWidth: 15
    }
  },
  {
    name: 'Age',
    fieldName: 'Age',
    width: '40',
    header: {
      text: 'Age'
    },
    styleName: 'right-column'
  },
  {
    name: 'Phone',
    fieldName: 'Phone',
    width: '100',
    styleName: 'right-column',
    header: {
      text: 'Phone'
    }
  },
  {
    name: 'ProductId',
    fieldName: 'ProductId',
    width: '120',
    styleName: 'right-column',
    header: {
      text: 'Product Code'
    }
  },
  {
    name: 'KorCountry',
    fieldName: 'KorCountry',
    width: '100',
    styleName: 'right-column',
    header: {
      text: 'Country'
    }
  },
  {
    name: 'OrderDate',
    fieldName: 'OrderDate',
    width: '100',
    header: {
      text: 'Order Date'
    }
  },
  {
    name: 'CardNumber',
    fieldName: 'CardNumber',
    width: '140',
    header: {
      text: 'Card No.'
    }
  },
  {
    name: 'StartDate',
    fieldName: 'StartDate',
    width: '100',
    header: {
      text: 'Start Date'
    }
  },
  {
    name: 'EndDate',
    fieldName: 'EndDate',
    width: '100',
    header: {
      text: 'End Date'
    }
  },
  {
    name: 'ToMonth',
    fieldName: 'ToMonth',
    width: '50',
    header: {
      text: 'Pay Cnt.'
    },
    styleName: 'right-column'
  },
  {
    name: 'Month',
    fieldName: 'Month',
    width: '50',
    header: {
      text: 'Residuum'
    },
    styleName: 'right-column'
  },
  {
    name: 'InterestRate',
    fieldName: 'InterestRate',
    width: '50',
    header: {
      text: 'Interest Rate'
    },
    styleName: 'right-column'
  },
  {
    name: 'SaveCost',
    fieldName: 'SaveCost',
    width: '70',
    header: {
      text: 'Payment'
    },
    styleName: 'right-column'
  },
  {
    name: 'SaveMaturity',
    fieldName: 'SaveMaturity',
    width: '120',
    header: {
      text: 'Save Maturity'
    },
    styleName: 'right-column'
  },
  {
    name: 'CurrentSave',
    fieldName: 'CurrentSave',
    width: '80',
    header: {
      text: 'Currency Save'
    },
    styleName: 'right-column'
  }
];

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

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

function excelExport() {
  gridView.exportGrid({
    type: 'excel',
    target: 'local',
    fileName: 'gridExportSample.xlsx',
    exportImage: true,
    applyDynamicStyles: true,
    done: function () {
      alert('done excel export');
    }
  });
}
```

### exportImage settings

If exportOptions.exportImage is true, everything is output except renderer.exportImage is false.
If exportOptions.exportImage is false, there is no output.
If exportOptions.exportImage is undefined, only renderer.exportImage is true is output.

```
//Column renderer settings
renderer: {
     type: "image",
     imageField: "imageUrl",
     imageHeight: 80;
     exportImage: true
}

//export
gridView.exportGrid({
     type: "excel",
     target: "local",
     fileName: "gridExportSample.xlsx",
     exportImage: true,
     applyDynamicStyles: true;
     done: function () {
         alert("done excel export")
     }
});
```