Search code examples
javascriptjqueryspreadjs

SpreadJS ClipboardPasteOptions is set to "All" but no formatting is applied


i open a spreadsheet and i can see in console:

_clipBoardOptions: "All"

in activeSheet obj.

but whenever i try to paste formatting from excel it just passes the value. any thoughts on were i'm going wrong.?

Basically the default is "All" but no formatting is passed to SpreadJS Here's my initialisation

$("#ss").wijspread({sheetCount:1}); // create wijspread control
    var spread = $("#ss").wijspread("spread"); // get instance of wijspread control
    var sheet = spread.getActiveSheet();

also when i try manually adding the method after the initialisation as so :

sheet.clipBoardOptions($.wijmo.wijspread.ClipboardPasteOptions[0])

i tried looking for a solution but not much information is giving and the api is kinda bum !

thanks in advance to any of you helpers!


Solution

  • SpreadJS does not support pasting formatting from Excel. We are looking into ways that we can implement support for that in a future release.

    For now, SpreadJS can only import the entire Excel workbook using the ExcelIO web service.

    To get the content of a cell range copied to SpreadJS, the best suggestion I have now is to use ExcelIO to import that workbook to a hidden SpreadJS instance, then use ClipboardPasteUndoAction to copy and paste the range from the hidden SpreadJS to the visible one.

    Here is a code example showing how to use the ExcelIO web service to import an Excel file:

        <!DOCTYPE html>
        <html>
        <head>
            <title>Excel IO Sample</title>
        <link type="text/css" href="./css/cobalt/jquery-wijmo.css" rel="stylesheet" />
         <link type="text/css" href="./css/gcspread.sheets.8.40.20151.0.css" rel="stylesheet" /> 
            <script type="text/javascript" src="./external/jquery-1.9.1.js"></script>            
            <script type="text/javascript" src="./scripts/gcspread.sheets.all.8.40.20151.0.min.js"></script>
    
            <script type="text/javascript">
                $(function () {
                    //Initialize SpreadJS
                    new GcSpread.Sheets.Spread($("#ss").get(0), {sheetCount: 2});
    
                    //For Excel Import
                    $("#btn_Import").click(function () {
                        // SpreadJS Excel IO import service api.
                        var serverUrl = $("#serviceHost").val() + "/xsapi/import";
                        // Generate import api options
                        var formData = new FormData();
                        //Choose a file to import
                        var $importingFile = $("#loadExcel");
                        var theFile = $importingFile[0].files[0];
                        var accept = "application/json";
                        formData.append("file", theFile);
                        formData.append("ExcelOpenFlags", "NoFlagsSet");
                        formData.append("TextFileOpenFlags", "None");
                        formData.append("Password", "");
                        $.ajax({
                            //Server script to process data
                            url: serverUrl,
                            type: 'POST',
                            //Ajax events
                            success: function completeHandler(data, textStatus, jqXHR) {
                                var spread = $("#ss").data("spread");
                                spread.fromJSON(JSON.parse(jqXHR.responseText).spread);
                            },
                            error: function errorHandler(jqXHR, textStatus, errorThrown) {
                                alert(errorThrown);
                            },
                            // Form data
                            data: formData,
                            //Options to tell jQuery not to process data or worry about content-type.
                            cache: false,
                            contentType: false,
                            processData: false,
                            //Options to tell server return data with specified type
                            headers: {
                                "Accept": accept
                            }
                        });
                    });
    
                    //For Excel Export with Form Post.
                    $("#btn_Export").click(function () {
                        var spread = $("#ss").data("spread");
                        // SpreadJS Excel IO import service api.
                        var serverUrl = $("#serviceHost").val() + "/xsapi/export";
                        // Generate import api options
                        var optContentType = "application/json";
                        // Post the json from spreadjs.
                        var dataObj = {
                            "spread": spread.toJSON(),
                            "exportFileType": "xlsx",
                            "excel": {
                                "saveFlags": "NoFlagsSet",
                                "password": ""
                            },
                        };
                        var content = JSON.stringify(dataObj);
                        var formInnerHtml = '<input type="hidden" name="type" value="' + htmlSpecialCharsEntityEncode(optContentType) + '" />';
                        formInnerHtml += '<input type="hidden" name="data" value="' + htmlSpecialCharsEntityEncode(content) + '" />';
                        var $iframe = $("<iframe style='display: none' src='about:blank'></iframe>").appendTo("body");
                        $iframe.ready(function () {
                            var formDoc = getiframeDocument($iframe);
                            formDoc.write("<html><head></head><body><form method='Post' action='" + serverUrl + "'>" + formInnerHtml + "</form>dummy windows for postback</body></html>");
                            var $form = $(formDoc).find('form');
                            $form.submit();
                        });
                    });
                });
    
                //gets an iframes document in a cross browser compatible manner
                function getiframeDocument($iframe) {
                    var iframeDoc = $iframe[0].contentWindow || $iframe[0].contentDocument;
                    if (iframeDoc.document) {
                        iframeDoc = iframeDoc.document;
                    }
                    return iframeDoc;
                }
    
                var htmlSpecialCharsRegEx = /[<>&\r\n"']/gm;
                var htmlSpecialCharsPlaceHolders = {
                    '<': 'lt;',
                    '>': 'gt;',
                    '&': 'amp;',
                    '\r': "#13;",
                    '\n': "#10;",
                    '"': 'quot;',
                    "'": 'apos;' /*single quotes just to be safe*/
                };
                function htmlSpecialCharsEntityEncode(str) {
                    return str.replace(htmlSpecialCharsRegEx, function (match) {
                        return '&' + htmlSpecialCharsPlaceHolders[match];
                    });
                }
            </script>
        </head>
        <body>
            <h2>SpreadJS Excel IO Sample</h2>
            <div style="margin-bottom: 10px">
                <label><b>Excel IO Service Host : </b></label>
                <input id="serviceHost" value="http://localhost/ExcelIO" style="width: 500px" />
            </div>
            <div id="ss" style="width: 660px; height: 500px; border: 1px solid gray; float: left">
            </div>
            <div style="width: 30%; height: 500px; margin-left: 15px; float: left">
                <fieldset style="margin-bottom: 15px; height: 45%">
                    <legend><b>Excel IO Import Options</b></legend>
                    <input type="file" id="loadExcel" accept=".xlsx, .xls, .csv, .txt" />
                    <input id="btn_Import" type="button" value="Import" />
                </fieldset>
                <fieldset style="margin-bottom: 15px; height: 45%">
                    <legend><b>Excel IO Export Options</b></legend>
                    <input id="btn_Export" type="button" value="Export" />
                </fieldset>
            </div>
        </body>
        </html>
    

    link: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#exceliocode.html

    Here is a code example showing how to use the ClipboardPasteUndoAction:

        $(document).ready(function () {
            //There are two buttons in html page with the id "cutPasteBtn" and "copyPasteBtn".
    
            var spread = new GcSpread.Sheets.Spread($("#ss").get(0),{sheetCount:3});
            var sheet = spread.getActiveSheet();
            sheet.setValue(0, 0, 1, GcSpread.Sheets.SheetArea.viewport);
            sheet.setValue(1, 0, 2, GcSpread.Sheets.SheetArea.viewport);
            sheet.setFormula(2, 0, "=A1+A2", GcSpread.Sheets.SheetArea.viewport);
            sheet.setValue(0, 1, 3, GcSpread.Sheets.SheetArea.viewport);
            sheet.setValue(1, 1, 4, GcSpread.Sheets.SheetArea.viewport);
            sheet.setFormula(2, 1, "=B1+B2", GcSpread.Sheets.SheetArea.viewport);
            var fromRange = new GcSpread.Sheets.Range(0, 0, 3, 2);
            var toRanges = [new GcSpread.Sheets.Range(4, 0, 3, 2)];
    
            $("#cutPasteBtn").click(function () {
                //Cut Paste Action
                var clipboardCutPasteAction = new GcSpread.Sheets.UndoRedo.ClipboardPasteUndoAction(sheet, sheet, sheet, { fromRange: fromRange, pastedRanges: toRanges, isCutting: true, clipboardText: "" }, GcSpread.Sheets.ClipboardPasteOptions.Values);
                clipboardCutPasteAction.execute(sheet);
            });
    
    
            $("#copyPasteBtn").click(function () {
                //Copy Paste Action
                var clipboardCopyPasteAction = new GcSpread.Sheets.UndoRedo.ClipboardPasteUndoAction(sheet, sheet, sheet, { fromRange: fromRange, pastedRanges: toRanges, isCutting: false, clipboardText: "" }, GcSpread.Sheets.ClipboardPasteOptions.Values);
                clipboardCopyPasteAction.execute(sheet);
            });
        });
    

    link: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#sccopy.html

    Regards,

    GrapeCity Experts