简体   繁体   中英

Live updating div with xlsx.js

I've got a basic webpage, with a number of divs. I'm using the xlsx.js package to read data from a number of xlsx files, stored on the webpage's server (ie in the web page's root directory). I'm polling the xlsx files every second to monitor for changes.

Below is a basic representation of my code:

The HTML div setup:

<script type="text/javascript" src="xlsx.js"></script>

<div class="container" id="main_div">STARTING STRING</div>

The JS:

<script type="text/javascript">
    (function(window, document, undefined) {
        window.onload = run;

        function run() {
            var Source = "Data.xlsx";
            var GetData = new XMLHttpRequest();
            GetData.open("GET", Source, true);
            GetData.responseType = "arraybuffer";

            GetData.onload = function(e) {
                //Receive and process XLSX data into an array
                //Assign 'Cell' as a particular cell in the worksheet
                var Cell = Worksheet['A1'];
                var CellValue = Cell.v;

                //Assign CellValue to the div
                document.getElementById('main_div').innerHTML = CellValue;

                //Start a 1 second poll
                var DataPoll = setTimeout(run, 1000);
            }

            GetData.send();

        }

    })(window, document, undefined);
</script>

The issue I'm having is that when saving changes to cell A1 in the worksheet (on the server itself), main_div (on the client webpage) doesn't always update to the new value. Even on refreshing the client webpage, it will often retain the previous value of A1. I thought this might be a cache issue, so I've used all the required cache-control HTML meta parameters.

Should I be clearing the div at the start of the run() function?

EDIT: Some further clarifications. I've been running the webpage on the server itself (localhost), to eliminate the possibility of it being a server connection issue. I've checked the IIS log files, which show only 200 and 304 HTTP status codes.

I've checked the network requests in Chrome Developer Tools, which has highlighted what I initially believed to be the problem. The Data.xlsx file isn't actually being checked each second. It's 'checking' the file from the cache (HTTP Status Code), which would obviously not contain any changes made to the Excel file.

Given that this indeed looks like a cache issue, and that I've already got all the HTML meta cache-control characteristics set, are there additional steps I can take to prevent any caching of the .xlsx file?

在此处输入图片说明

Can you evade caching by using

var Source = "Data.xlsx?" + new Date().getTime();

?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM