Spreadsheet toJSON() does not contain Workbook images info

[veselints]

Bug report

Spreadsheet toJSON() does not contain Workbook images info. As a consequence, the e.workbook parameter in the excelExport event does not contain images info, even if its sheets have drawings.

Reproduction of the problem

Call spreadsheet.toJSON() on a Spreadsheet that has some images inserted. The JSON definition will not have images even if it has drawings for its sheet(s).

Expected/desired behavior

Images info should be present in the exported JSON

Environment

• Kendo UI version: 2024.1.130
• Browser: [all]

Bug report in Common Engine

• https://github.com/telerik/kendo-spreadsheet-common/issues/98

[veselints]

The images data could be retrieved from the Spreadsheet itself following this logic:

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 next() {
  if (--countOfImages <= 0) {
    workbook.images = images;
  }
}

var images = {};
var spreadsheet = $("#spreadsheet").getKendoSpreadsheet();
var wbImages = spreadsheet._workbook._images;
var keys = Object.keys(wbImages);
var countOfImages = keys.length;
var workbook = spreadsheet.toJSON();

if (countOfImages) {
  keys.forEach(function (id) {
    var url = wbImages[id].url;

    loadBinary(url, function (data, contentType) {
      images[id] = { type: contentType, data: data };
      next();
    });
  });
}

Or better, retrieve images directly from Blob objects:

function next() {
  if (--countOfImages <= 0) {
    workbook.images = images;
  }
}

var images = {};
var spreadsheet = $("#spreadsheet").getKendoSpreadsheet();
var wbImages = spreadsheet._workbook._images;
var keys = Object.keys(wbImages);
var countOfImages = keys.length;
var workbook = spreadsheet.toJSON();

if (countOfImages) {
  keys.forEach(function (id) {
    var blob = wbImages[id].blob;
    var contentType = blob.type;

    blob.arrayBuffer().then((buffer) => {
        images[id] = { type: contentType, data: buffer };
        next();
    });
  });
}

[nelito987]

Reported in ticket ID: 1520163

[veselints]

Related to: #6529

[nelito987]

Reported in ticket ID: 1551883

[Iankodj]

Reported in ticket ID: 15981

[nelito987]

Reported in ticket ID: 1608333