Spread JS Not supporting to Export Cell Styles and Images

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

  • Posted 29 September 2020, 3:16 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

    Requesting your support on earliest
  • Replied 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
  • Replied 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
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels