复制Excel带样式的空单元格会出现空格

问题：复制Excel带样式的空单元格到SpreadJS中会出现空格

背景：

当从 Excel 中复制一个带样式的空单元格到 SpreadJS 中时，SpreadJS 的单元格中会多出来一个空格。

这个问题实际上是目前一个限制，如果将复制的内容粘贴到一个div元素中，会发现这个div也会存在一个空格。

那么应该如何解决这个问题呢？

解决方案：

可以参考以下Demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.1.4.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript"
        src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.1.4.min.js"></script>
    <script type="text/javascript"
        src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.16.1.4.min.js"></script>
</head>

<body>
    <div id="ss" style="width: 98vw; height: 95vh;"></div>
    <script>
        window.onload = function () {
            GC.Spread.Common.CultureManager.culture("zh-cn");
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            var sheet = spread.getActiveSheet();
            var clipPasted = false;
            var pasteRange;
            var copiedText = "";

            sheet.bind(GC.Spread.Sheets.Events.ClipboardPasted, function (sender, args) {
                clipPasted = false;

                if (args.pasteData.html != "" && args.pasteData.text != "") {
                    clipPasted = true;
                    pasteRange = args.cellRange;
                }

                if (!navigator.clipboard) {
                    setTextArray(copiedText);
                }
            });

            document.getElementById("ss").addEventListener('paste', function (event) {
                if (!navigator.clipboard) {
                    if (event.clipboardData) {
                        // Classic Edge
                        copiedText = event.clipboardData.getData('text');
                    } else {
                        // IE11
                        copiedText = window.clipboardData.getData('text');
                    }

                    return;
                }

                if (!clipPasted) return;

                // Chrome, FireFox
                let paste = (event.clipboardData || window.clipboardData).getData('text');
                setTextArray(paste);
            });

            function setTextArray(paste) {
                var textArray = [];
                var copyText = paste.split('\n');

                for (var i = 0; i < pasteRange.rowCount; i++) {
                    var copyRow = copyText[i].replace(/\r/, "").split('\t');
                    for (var j = 0; j < copyRow.length; j++) {
                        if (copyRow[j] === "") {
                            copyRow[j] = null;
                        }
                    }
                    textArray.push(copyRow);
                }

                sheet.suspendPaint();
                sheet.suspendDirty();
                sheet.suspendEvent();

                sheet.setArray(pasteRange.row, pasteRange.col, textArray);

                sheet.resumeEvent();
                sheet.resumeDirty();
                sheet.resumePaint();
            };
        }
    </script>
</body>

</html>

另外，由于新版浏览器的安全策略，clipboard只有在安全域名下才可以访问，http域名下会显示undefined，但使用https开头的域名，或localhost，就可以访问navigator.clipboard。

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.26