javascript - Create a website that show data read from a local excel file and gets updated periodically - Stack Overflow

admin管理员组

文章数量:1129097

I need to create a website (also local one is fine) that reads an excel file and shows the content into a table and update the contents periodically.

I have already written something but it doesn't update the content of the website periodically as it should. Can you help me?

This is how the page select and read the file:

document.getElementById('file-input').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        lastModified = new Date(file.lastModified);
        const reader = new FileReader();
        reader.onload = function (e) {
            fileData = new Uint8Array(e.target.result);
            updateTable();
        };
        reader.readAsArrayBuffer(file);
    }
});

function updateTable() {
    if (fileData) {
        const workbook = XLSX.read(fileData, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        const tableBody = document.getElementById('excel-data');
        tableBody.innerHTML = '';

        jsonData.forEach((row, rowIndex) => {
            if (rowIndex === 0) return; // Skip header row
            const tr = document.createElement('tr');
            row.forEach(cell => {
                const td = document.createElement('td');
                td.className = 'py-2 px-4 border-b border-gray-200';
                td.textContent = cell;
                tr.appendChild(td);
            });
            tableBody.appendChild(tr);
        });

        document.getElementById('last-modified')
          .textContent = `Data ultima modifica del file Excel: ${lastModified.toLocaleString()}`;
    }
}

this is how it should get updated every 5 minutes:

setInterval(() => {
    if (fileData) {
        updateTable();
    }
}, 300000);

Using the the debugger the function updateTable() seems to be called and get redirected to the following tailwind function

new MutationObserver(async r => {
        let e = !1;
        if (!cf) {
            cf = new MutationObserver(async () => await pf(!0));
            for (let t of document.querySelectorAll(`style[type="${uf}"]`))
                Pv(t)
        }
        for (let t of r)
            for (let i of t.addedNodes)
                i.nodeType === 1 && i.tagName === "STYLE" && i.getAttribute("type") === uf && (Pv(i),
                e = !0);
        await pf(e)
    }

but after this no contents gets updated although the excel file got modified in the meanwhile.

I need to create a website (also local one is fine) that reads an excel file and shows the content into a table and update the contents periodically.

I have already written something but it doesn't update the content of the website periodically as it should. Can you help me?

This is how the page select and read the file:

document.getElementById('file-input').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        lastModified = new Date(file.lastModified);
        const reader = new FileReader();
        reader.onload = function (e) {
            fileData = new Uint8Array(e.target.result);
            updateTable();
        };
        reader.readAsArrayBuffer(file);
    }
});

function updateTable() {
    if (fileData) {
        const workbook = XLSX.read(fileData, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        const tableBody = document.getElementById('excel-data');
        tableBody.innerHTML = '';

        jsonData.forEach((row, rowIndex) => {
            if (rowIndex === 0) return; // Skip header row
            const tr = document.createElement('tr');
            row.forEach(cell => {
                const td = document.createElement('td');
                td.className = 'py-2 px-4 border-b border-gray-200';
                td.textContent = cell;
                tr.appendChild(td);
            });
            tableBody.appendChild(tr);
        });

        document.getElementById('last-modified')
          .textContent = `Data ultima modifica del file Excel: ${lastModified.toLocaleString()}`;
    }
}

this is how it should get updated every 5 minutes:

setInterval(() => {
    if (fileData) {
        updateTable();
    }
}, 300000);

Using the the debugger the function updateTable() seems to be called and get redirected to the following tailwind function

new MutationObserver(async r => {
        let e = !1;
        if (!cf) {
            cf = new MutationObserver(async () => await pf(!0));
            for (let t of document.querySelectorAll(`style[type="${uf}"]`))
                Pv(t)
        }
        for (let t of r)
            for (let i of t.addedNodes)
                i.nodeType === 1 && i.tagName === "STYLE" && i.getAttribute("type") === uf && (Pv(i),
                e = !0);
        await pf(e)
    }

but after this no contents gets updated although the excel file got modified in the meanwhile.

• javascript
• html
• excel

Share Improve this question Follow edited Jan 8 at 14:24 ADyson 61.7k1515 gold badges7070 silver badges8585 bronze badges asked Jan 8 at 12:44 GiovanniGiovanni 2111 silver badge22 bronze badges New contributor Giovanni is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

This fundamentally can't work as an automated process, in the way you've designed it.

1. Bear in mind that your code only reads data into fileData when the "change" event occurs in the file input box. This means you need to manually go into that input and select a file again, before it will read any new data. And the "change" event will only occur if you select a different file. Opening up the dialog and selecting the same one again won't trigger the event.

2. Even if you change the code so that your interval code selects the file currently in the input control, and sends it to the FileReader again, it will not trigger the reader's onload function. There is no new data to be read anyway - the file is only taken from the disk again when the user selects a file in the input control.

This is a browser security restriction which you cannot work around. Imagine the danger / damage which could be caused if browser code could arbitrarily read data from a user's disk whenever it wanted to.

Instead it can only read such data when a user, through the UI, has specifically provided a file that the user is happy for the browser to see, and it will only work on the version of the file that the user explicitly provided. The user did not give permission for some later version of the file to be accessed by the browser whenever it wants to.

If you want this to work and be fully automated you will need to store the Excel file on your webserver instead, and fetch it from there.

本文标签：