Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Maneesh
105
Adding image in excel
posted

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>

<style>
.right {
float: right;
}

#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>

<script>
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/",
cssPath: "http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/",
resources: 'modules/infragistics.util.js,' +
'modules/infragistics.documents.core.js,' +
'modules/infragistics.excel.js'
});
</script>
<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>

Parents
  • 20255
    Offline posted

    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.

Reply Children