如何将本地目录中多个JSON文件加载到Tabulator 6.2表格中？

问题原因 #

Tabulator本身不支持直接加载本地目录下的所有JSON文件，核心限制有两点：

1. 浏览器安全机制：通过file://协议打开本地页面时，浏览器禁止JavaScript直接读取本地文件目录内容，防止隐私泄露。
2. Tabulator API设计：ajaxURL仅支持请求单个资源（文件或接口），table.import()方法需要传入具体数据源（单个文件内容、URL或数据数组），无法通过文件后缀批量加载文件。

解决方案1：前端通过File API手动选择多文件 #

添加文件选择控件，让用户手动选中多个JSON文件，读取并合并数据后加载到表格：

<!-- 文件选择控件，支持多选JSON -->
<input type="file" id="json-file-picker" multiple accept=".json">

<!-- Tabulator表格容器 -->
<div id="example-table"></div>

<script>
// 初始化Tabulator表格（替换成你的列配置）
const table = new Tabulator("#example-table", {
    columns: [
        {title: "ID", field: "id"},
        {title: "名称", field: "name"},
        // 其他列配置...
    ]
});

// 监听文件选择事件
document.getElementById("json-file-picker").addEventListener("change", e => {
    const allData = [];
    const files = Array.from(e.target.files);

    files.forEach(file => {
        const reader = new FileReader();
        reader.onload = event => {
            try {
                // 解析单个JSON文件内容并合并到总数据
                const data = JSON.parse(event.target.result);
                allData.push(...data);

                // 所有文件读取完成后，更新表格数据
                if (allData.length === files.length) {
                    table.setData(allData);
                }
            } catch (err) {
                console.error(`解析文件${file.name}失败:`, err);
            }
        };
        reader.readAsText(file);
    });
});
</script>

解决方案2：后端接口合并返回所有JSON数据 #

如果是在服务器环境下运行（而非本地file://协议），可以通过后端接口读取目录下的所有JSON文件，合并后返回给前端，Tabulator直接请求该接口：

示例（Node.js + Express）：

1. 安装依赖：

npm install express fs-extra

2. 后端代码（server.js）：

const express = require('express');
const fs = require('fs-extra');
const path = require('path');
const app = express();

// 定义接口返回目录下所有JSON合并数据
app.get('/get-all-json', async (req, res) => {
    try {
        const jsonDir = path.join(__dirname, 'SaDirectory'); // 你的JSON文件目录
        const files = await fs.readdir(jsonDir);
        let mergedData = [];

        for (const file of files) {
            if (path.extname(file).toLowerCase() === '.json') {
                const filePath = path.join(jsonDir, file);
                const content = await fs.readFile(filePath, 'utf8');
                const data = JSON.parse(content);
                mergedData.push(...data);
            }
        }

        res.json(mergedData);
    } catch (err) {
        console.error(err);
        res.status(500).json({error: '加载JSON文件失败'});
    }
});

app.listen(3000, () => {
    console.log('服务器运行在http://localhost:3000');
});

3. 前端Tabulator代码：

const table = new Tabulator("#example-table", {
    ajaxURL: "http://localhost:3000/get-all-json",
    columns: [
        {title: "ID", field: "id"},
        {title: "名称", field: "name"},
        // 其他列配置...
    ]
});

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