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)"
              }
            ]
          }]
      }]
    });

    kendo.saveAs({
      dataURI: workbook.toBlob(),
      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.

In this article
Not finding the help you need? Improve this article