如何通过JavaScript将Kendo Grid中含JSON/XML的条目格式化后复制到剪贴板

问题根因 #

你之前的写法不生效主要是两个原因：

1. 你拿到的newItem.Content本身是已经序列化完成的JSON字符串，直接对字符串执行JSON.stringify不会产生格式化效果，反而会额外添加转义字符
2. 你用了input类型的控件存待复制内容，input是单行输入控件，会自动丢弃内容里的换行、缩进符，自然复制出来就是无格式的纯字符串

修复方案 #

核心逻辑

优先用临时textarea控件处理（不用改原有隐藏字段）：textarea是多行控件，可以完整保留换行和缩进，用完直接销毁即可，不需要改动现有页面结构；同时添加JSON/XML格式化判断逻辑，对应处理后再复制。

改后的CopyData函数代码：

function CopyData(e) {
    var tr = $(e.target).closest("tr");
    var newItem = this.dataItem(tr);
    var rawContent = newItem.Content;
    var formattedContent = rawContent;

    // 尝试格式化JSON
    try {
        const jsonObj = JSON.parse(rawContent);
        formattedContent = JSON.stringify(jsonObj, null, 4);
    } catch (e) {
        // 不是JSON，尝试格式化XML
        try {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(rawContent, "text/xml");
            // 检查XML解析是否报错
            if (xmlDoc.querySelector("parsererror") === null) {
                const serializer = new XMLSerializer();
                // 基于XSLT实现XML格式化保留缩进
                const xsltDoc = new DOMParser().parseFromString(
                    '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">' +
                    '<xsl:strip-space elements="*"/>' +
                    '<xsl:output method="xml" indent="yes"/>' +
                    '<xsl:template match="/"><xsl:copy-of select="."/></xsl:template>' +
                    '</xsl:stylesheet>',
                    "application/xml"
                );
                const xsltProcessor = new XSLTProcessor();
                xsltProcessor.importStylesheet(xsltDoc);
                const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
                formattedContent = serializer.serializeToString(resultDoc);
            }
        } catch (e) {
            // 既不是JSON也不是XML就用原始内容
        }
    }

    // 临时创建textarea存格式化后的内容
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = formattedContent;
    // 把textarea放到可视区外，避免页面闪烁
    tempTextarea.style.position = "absolute";
    tempTextarea.style.left = "-99999px";
    tempTextarea.style.top = "-99999px";
    document.body.appendChild(tempTextarea);

    tempTextarea.select();
    tempTextarea.setSelectionRange(0, 99999); /* 兼容移动端 */
    document.execCommand("copy");

    // 用完销毁临时元素
    document.body.removeChild(tempTextarea);
}

额外优化建议 #

如果不需要兼容非常老的浏览器，可以用更现代的异步剪贴板API替换document.execCommand，写法更简洁：

// 把上面的复制逻辑替换成下面的即可
navigator.clipboard.writeText(formattedContent).then(() => {
    // 此处可自行添加复制成功的提示逻辑
}).catch(err => {
    // 复制失败降级用原来的execCommand方案
});

处理完成后，不管是JSON还是XML内容，复制到剪贴板时都会自带正确的缩进格式，粘贴到编辑器里就是格式化好的结构。

内容的提问来源于stack exchange，提问作者IntelligentCancer