images Object
(default: null)
An object containing any images used in the Spreadsheet. The keys should be image ID-s (they are referenced by this ID in sheets.drawings) and the values should represent binary data.
Example - loading images in Workbook
<script>
var images = {
testImage: "https://demos.telerik.com/kendo-ui/content/web/spreadsheet/sample-image.png"
};
var ids = Object.keys(images);
var count = ids.length;
if (count) {
Object.keys(images).forEach(function(id){
var url = images[id];
loadBinary(url, function(data, contentType){
images[id] = { type: contentType, data: data };
next();
});
});
} else {
createWorkbook(); /* just in case there's no image */
}
function next() {
if (--count <= 0) {
createWorkbook();
}
}
function loadBinary(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
callback(xhr.response, xhr.getResponseHeader("Content-Type"));
};
xhr.onerror = function() {
callback(null);
};
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.send();
}
function createWorkbook() {
var workbook = new kendo.ooxml.Workbook({
images: images,
sheets: [{
name: "Food Order",
drawings: [{
topLeftCell: "E3",
offsetX: 30,
offsetY: 10,
width: 450,
height: 330,
image: "testImage"
}],
rows: [
{
cells: [
{
value: "ID", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Product", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
}
]
}]
}]
});
workbook.toDataURLAsync().then(function(dataURL) {
kendo.saveAs({
dataURI: dataURL,
fileName: "Test.xlsx"
});
});
}
</script>
Note, we can reference the same image ID in two different drawings. See the sheets.drawings property for more information about a drawing's properties.