我来帮你分析下问题所在，然后给出两种可行的解决方案：

问题根源 #

1. 当你直接把value['preview']这个对象插入到HTML字符串的onclick属性中时，JavaScript会自动把对象转换为字符串表示，也就是[object Object]，这就是为什么你看到这个结果。
2. 当你尝试用JSON.stringify(value['preview'])时，生成的JSON字符串包含双引号，而你的HTML属性是用双引号包裹的（onclick="..."），这会导致浏览器提前截断属性值，引发SyntaxError: missing ) after argument list的错误——比如JSON里的"content"会闭合onclick的双引号，剩下的代码就变成了无效语法。

解决方案1：使用事件监听代替内联onclick（推荐） #

内联事件处理不仅容易引发引号冲突，还不利于代码维护和调试。更优雅的方式是用DOM方法创建元素，然后添加事件监听，直接传递对象：

// 创建行元素
let row = document.createElement('tr');

// 文件类型处理
if (value['type'] === 'file') {
    // 预览功能
    if (value['preview_available']) {
        console.log(value["preview"]);
        
        // 创建操作列td
        const actionTd = document.createElement('td');
        actionTd.setAttribute('nowrap', '');
        actionTd.setAttribute('width', '1%');
        
        // 创建带tooltip的span
        const tooltipSpan = document.createElement('span');
        tooltipSpan.setAttribute('data-toggle', 'tooltip');
        tooltipSpan.setAttribute('title', 'Vorschau');
        
        // 创建预览按钮
        const previewBtn = document.createElement('button');
        previewBtn.type = 'button';
        previewBtn.className = 'btn btn-link btn-sm';
        previewBtn.setAttribute('data-toggle', 'modal');
        previewBtn.setAttribute('data-target', '#previewModal');
        
        // 创建图标元素
        const icon = document.createElement('i');
        icon.className = 'material-icons text-primary';
        icon.textContent = 'desktop_windows';
        
        // 组装元素
        previewBtn.appendChild(icon);
        tooltipSpan.appendChild(previewBtn);
        actionTd.appendChild(tooltipSpan);
        row.appendChild(actionTd);
        
        // 添加点击事件监听，直接传递对象
        tooltipSpan.addEventListener('click', () => {
            setPreviewContent(value['preview']);
        });
        
        previewBtn.addEventListener('click', () => {
            setNames(value['name']);
        });
    }
}

// 将行追加到表格
$('#fileTableBody').append(row);

这种方式完全避开了字符串拼接的引号问题，还能让代码更清晰。

解决方案2：正确转义JSON字符串（兼容旧写法） #

如果你一定要保留字符串拼接的方式，需要把JSON字符串中的双引号转义，避免和HTML属性的双引号冲突：

// 创建行元素
let row = "<tr>";
// 设置操作按钮
let actions_append = '';
// 文件类型处理
if (value['type'] === 'file') {
    // 预览功能
    if (value['preview_available']) {
        console.log(value["preview"]);
        // 将JSON字符串转义：把双引号替换为HTML实体，或者转义后的双引号
        const escapedPreview = JSON.stringify(value['preview']).replace(/"/g, '&quot;');
        // 同时处理文件名的单引号转义，避免setNames的参数出错
        const escapedName = value['name'].replace(/'/g, "\\'");
        
        actions_append += `<td nowrap width="1%">
            <span data-toggle="tooltip" title="Vorschau" onclick="setPreviewContent(${escapedPreview})">
                <button onclick="setNames('${escapedName}')" type="button" class="btn btn-link btn-sm" data-toggle="modal" data-target="#previewModal"><i class="material-icons text-primary">desktop_windows</i>
                </button>
            </span>
        </td>`
    }
}
// 将行追加到表格
$('#fileTableBody').append(row + actions_append + '</tr>')

这里用replace(/"/g, '"')把JSON里的双引号转换成HTML实体，这样浏览器解析时会正确识别为字符串的一部分，不会截断属性值。另外也给文件名做了单引号转义，防止文件名里的单引号破坏setNames的参数格式。

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