Spread JS Not supporting to Export Cell Styles and Images

Spread JS Not supporting to Export Cell Styles and Images

Posted by: shanathkumar.shetty on 29 September 2020, 3:16 am EST

• 

  shanathkumar.shetty

  • Post Options:
  • Link
    Copy

  Posted 29 September 2020, 3:16 am EST - Updated 3 October 2022, 1:09 am EST

  Hi Good Day,
  
  We are working with the spread JS and currently facing some issues, Requesting your support on below points.

  1).I am setting the cell Type as HTML to pass the Image and other data’s to the cell and view the content. the content is converted and Displayed in spread JS,
  
  But if I export that sheet i can see only HTML value present in the downloaded cell.

  2).I am not able to paste the image from the clipboard to the spread JS sheet.
  
  3). Not able to Export the sheet with the Image

  

  782×316 3.5 KB

  

  1192×424 7.35 KB

  Requesting your support on earliest

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 September 2020, 11:14 pm EST

  Hi,

  Now SJS supports rich text, to set the rich text in cell we need to use the setValue method as demonstrated in the following demo:
  
  https://www.grapecity.com/spreadjs/demos/features/cells/basic-rich-text/purejs
  
  Setting rich text by the above method would export correctly to excel. You may refer to the following sample demonstrating the same:
  
  https://codesandbox.io/s/spread-js-starter-forked-6b6ne?file=/src/index.js:4687-4695
  
  Regarding copy/pasting the images, we are sorry but it is currently not supported by SJS.

  Regards
  
  Sharad

• 

  shanathkumar.shetty

  • Post Options:
  • Link
    Copy

  Posted 8 October 2020, 12:19 am EST

  Hi , I Have requirement to paste the image from the clipboard,
  
  which looks not supported by spread js, can you give some heads Up

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 9 October 2020, 1:06 am EST

  Hi,

  You may use paste event and insert the image when paste happened. Please refer to the following code snippet and the attached sample that demonstrates the same.

  window.addEventListener(
  "paste",
  function (event) {
  var items = (event.clipboardData || event.originalEvent.clipboardData)
  .items;
  var blob = null;
  for (var i = 0; i < items.length; i++) {
  if (items[i].type.indexOf("image") === 0) {
  blob = items[i].getAsFile();
  }
  }
  if (blob !== null) {
  var reader = new FileReader();
  reader.onload = function (event) {
  var spread = GC.Spread.Sheets.findControl("ss");
  var sheet = spread.getActiveSheet();
  var rect = sheet.getCellRect(
  sheet.getActiveRowIndex(),
  sheet.getActiveColumnIndex()
  );
  sheet.pictures.add(
  "p1_" + new Date().valueOf(),
  event.target.result,
  rect.x,
  rect.y,
  200,
  200
  );
  };
  reader.readAsDataURL(blob);
  event.preventDefault();
  event.stopPropagation();
  }
  },
  true
  );
  

  sample: https://codesandbox.io/s/blue-platform-ifyb7?file=/src/index.js

  Regards
  
  Avinash