Adding image in excel

Maneesh asked on Sep 20, 2018 7:28 PM

Hi would like to add logo in to this excel generated. what should I do?

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>

#exportButton {
float: left;
}
</style>
<!–Required scripts–>
<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
<!– External files for exporting –>
<script src=”http://www.igniteui.com/js/external/FileSaver.js”></script>
<script src=”http://www.igniteui.com/js/external/Blob.js”></script>

<!– Ignite UI Loader Script –>
<script src=”http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.loader.js”></script>

function createFormattingWorkbook() {

var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
var sheet = workbook.worksheets().add(‘Sheet1’);

sheet.columns(0).setWidth(96, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(4).setWidth(80, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(6).setWidth(96, $.ig.excel.WorksheetColumnWidthUnit.pixel);

// Add merged regions for regions A1:D2 and E1:G2
var mergedCellA1D2 = sheet.mergedCellsRegions().add(0, 0, 1, 3);
var mergedCellE1G2 = sheet.mergedCellsRegions().add(0, 4, 1, 6);

// Add two large headers in merged cells above the data
mergedCellA1D2.value(‘Acme, Inc.’);
mergedCellA1D2.cellFormat().alignment($.ig.excel.HorizontalCellAlignment.center);
mergedCellA1D2.cellFormat().fill($.ig.excel.CellFill.createSolidFill(‘#ED7D31’));
mergedCellA1D2.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
mergedCellA1D2.cellFormat().font().height(16 * 20);

mergedCellE1G2.value(‘Invoice #32039’);
mergedCellE1G2.cellFormat().alignment($.ig.excel.HorizontalCellAlignment.center);
mergedCellE1G2.cellFormat().fill($.ig.excel.CellFill.createSolidFill(‘#FFC000’));
mergedCellE1G2.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
mergedCellE1G2.cellFormat().font().height(16 * 20);

// Format some rows and columns that should have similar formatting so we don’t have to set it on individual cells.
sheet.rows(2).cellFormat().font().bold(true);
sheet.columns(4).cellFormat().formatString(‘$#,##0.00_);[Red]($#,##0.00)’);
sheet.columns(6).cellFormat().formatString(‘$#,##0.00_);[Red]($#,##0.00)’);

// Add a light color fill to all cells in the A3:G17 region to visually separate it from the rest of the sheet. We can iterate
// all cells in the regions by getting an enumerator for the region and enumerating each item.
var light1Fill = $.ig.excel.CellFill.createSolidFill(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
var cells = sheet.getRegion(‘A3:G17’).getEnumerator();
while (cells.moveNext()) {
cells.current().cellFormat().fill(light1Fill);
}

// Populate the sheet with data
sheet.getCell(‘A3’).value(‘Date’);
sheet.getCell(‘B3’).value(‘Description’);
sheet.getCell(‘D3’).value(‘Qty’);
sheet.getCell(‘E3’).value(‘Cost/Unit’);
sheet.getCell(‘G3’).value(‘Total’);

sheet.getCell(‘A4′).value(new Date(’12/22/2014’));
sheet.getCell(‘B4’).value(‘Garage Door’);
sheet.getCell(‘D4’).value(1);
sheet.getCell(‘E4’).value(1875);
sheet.getCell(‘G4’).applyFormula(‘=D4*E4’);

sheet.getCell(‘A5′).value(new Date(’12/22/2014’));
sheet.getCell(‘B5’).value(‘Trim’);
sheet.getCell(‘D5’).value(3);
sheet.getCell(‘E5’).value(27.95);
sheet.getCell(‘G5’).applyFormula(‘=D5*E5’);

sheet.getCell(‘A6′).value(new Date(’12/22/2014’));
sheet.getCell(‘B6’).value(‘Install/Labor’);
sheet.getCell(‘D6’).value(8);
sheet.getCell(‘E6’).value(85);
sheet.getCell(‘G6’).applyFormula(‘=D6*E6’);

// Add a grand total which is bold and larger than the rest of the text to call attention to it.
sheet.getCell(‘E17’).value(‘GRAND TOTAL’);
sheet.getCell(‘E17’).cellFormat().font().height(14 * 20);
sheet.getCell(‘E17’).cellFormat().font().bold(true);

sheet.getCell(‘G17’).applyFormula(‘=SUM(G4:G16)’);
sheet.getCell(‘G17’).cellFormat().font().height(14 * 20);
sheet.getCell(‘G17’).cellFormat().font().bold(true);

// Save the workbook
saveWorkbook(workbook, “Formatting.xlsx”);
}

function saveWorkbook(workbook, name) {
workbook.save({ type: ‘blob’ }, function (data) {
saveAs(data, name);
}, function (error) {
alert(‘Error exporting: : ‘ + error);
});
}

</script>

</head>
<body>
<button id=”exportButton” onclick=”createFormattingWorkbook()”>Create File</button>
<br />
<img alt=”Result in Excel” src=”http://www.igniteui.com/images/samples/client-side-excel-library/excel-formatting.png” />
</body>
</html>

Replies

0

Zdravko Kolev answered on Apr 3, 2017 1:53 PM

Hello,

Thank you for contacting us.

In order to add image to a worksheet, my suggestion is to use topLeftCornerCell and bottomRightCornerCell along with WorksheetImage.

I have modified your sample, let me know if I am missing something.

Code snippet:

// Add image
var image = "data:image/png;base64,iVBORw0KGgoAAAA….";

var imageShape = new $.ig.excel.WorksheetImage(image);
imageShape.topLeftCornerCell(sheet.getCell('C9'));
imageShape.bottomRightCornerCell(sheet.getCell('F10'));
sheet.shapes().add(imageShape);

It is recommended to use base 64 encoded image, currently you cannot pass an IMG element to create a WorksheetImage. If you want to use Image my suggestion is to draw that image into a canvas and then use the toDataUrl to have it create a data url that you could then use when creating a WorksheetImage.

Let me know if I can be of further assistance.
- 0
  
  Sharann Nagarajan answered on Sep 18, 2018 6:18 AM
  
  i need to know how to export the fusionchart svg into excel sheet. help me bro
  - 0
    
    Alan Halama answered on Sep 20, 2018 7:28 PM
    
    At this time you can add an image of the chart to the excel sheet if you have one in the same approach that Zdravko has provided here. If you actually want to add an excel chart, that is a new product idea which you can post on our ideas site.