Hello Maanesh,
It is recommended to use base 64 encoded image, currently you cannot pass an image element to create a WorksheetImage. If you want to use Image my suggestion is to draw it into a canvas and then use the toDataUrl to have it create a data url that you could then use when creating a WorksheetImage.
Related thread with a sample:
https://ko.infragistics.com/community/forums/p/109480/515305.aspx#515305
Code snippet:
// Add imagevar image = "data:image/png;base64,iVB..."
var imageShape = new $.ig.excel.WorksheetImage(image); imageShape.topLeftCornerCell(sheet.getCell('C9'));imageShape.bottomRightCornerCell(sheet.getCell('F10'));sheet.shapes().add(imageShape);
Let me know if I can be of further assistance.
Hi,
It turns out that the constructor for the Worksheet image only takes a data uri. You cannot provide an Image element.
I am also getting the same error. The code is below. Any Idea what I am missing here?
<!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);
var image = new Image(); image.width = 400; image.height = 400; image.src = "https://cdn2.iconfinder.com/data/icons/social-18/512/Facebook-2-64.png"; var imageShape = new $.ig.excel.WorksheetImage(image); imageShape.topLeftCornerCell(sheet.getCell('C9')); imageShape.bottomRightCornerCell(sheet.getCell('D10')); sheet.shapes().add(imageShape);
// 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>
This code was suggested previously
It shows the below error
Cannot call method 'getHashCode' of null.
You mentioned to have a workaround for it, in your new release do you have the code for it?
Thanks,
Phanindra.
Here it is:
var image = new Image(); image.width = 400; image.height = 400; image.src = "banner.jpg"; var imageShape = new $.ig.excel.WorksheetImage(image); imageShape.topLeftCornerCell(sheet.getCell('C9')); imageShape.bottomRightCornerCell(sheet.getCell('D10')); worksheet.shapes().add(imageShape);