我有一个小的html/javascript网页,我想在脱机浏览器中运行。

以相同的方式,页面可以包含图像或CSS文件,并在脱机时使用它,我想包含一个3mb电子表格,JavaScript将其读取到2d数组中,我希望可以在IE8上使用以及现代的浏览器。

C:\Folder\index.html
C:\Folder\code.js
C:\Folder\picture.png
C:\Folder\spreadsheet.csv

我在网上发现了多种方法,例如
<script src="jquery-csv.js"></script>
var table = $.csv.toArrays("spreadsheet.csv");

或者
d3.text('spreadsheet.csv', function(error, _data){
            var table = d3.csv.parseRows(_data);
        });

或者
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

但是我倾向于得到同源策略错误,例如:
XMLHttpRequest cannot load file://data.txt. Received an invalid response. Origin 'null' is therefore not allowed access.

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

我似乎无法使它们脱机工作。我怎样才能做到这一点?

编辑:

我设法通过使用CSVtoArray函数here找到了以下仅适用于的文本文件:在Firefox 上,使用此大小的文件和隐藏的iframe相当缓慢。

最终,如果它能够在IE8上运行,并且我使用的是csv而不是txt文件,那将是更好的选择,但这至少是一个开始。
<iframe style="display:none;" id='text' src = 'file.txt' onload='read_text_file()'>
</iframe>

<script type="text/javascript" >

function read_text_file() {
    var text = document.getElementById('text').contentDocument.body.firstChild.innerHTML;
    var table = CSVToArray(text);
}

对于 IE8 ,我设法使其在小范围内工作,但是使用3mb文件时,它偶尔会导致浏览器崩溃,并总是向用户显示大量警告消息,提示正在使用Activex并警告了一些警告。该脚本会降低计算机的速度。
    window.onLoad = readFileInIE("file.csv");

    function readFileInIE(filePath) {

        try {
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            var file = fso.OpenTextFile(filePath, true);
            var text = file.ReadAll();
            var table = CSVToArray(text);
            file.Close();

            return fileContent;
        } catch (e) {
            if (e.number == -2146827859) {
                alert('Unable to access local files due to browser security settings. ' +
                    'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
                    'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
            }
        }
    }

最佳答案

这可能在IE8中不起作用,但是HTML5 API对此确实有用。只需使用:

window.onload = function() {
    var fileInput = document.getElementById('fileInput');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = //format you'd like to recieve;
        if (file.type.match(textType)) {
            var reader = new FileReader();
            reader.onload = function(e) {
                // apply magic here
            }
            reader.readAsText(file);
        }
        else
        {
            fileDisplayArea.innerText ="Sorry matey, can't help you with that filetype."
        }
    });
}

然后在那之后,一个简单的.html文件看起来像这样就可以解决问题:
<html lang="en">
    <head>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="page-wrapper">
            <div>
                <input type="file" id="fileInput">
            </div>
            <pre id="fileDisplayArea"></pre> //display any output here
        </div>
    </body>
</html>

关于javascript - 离线时如何将txt/csv文件加载到javascript字符串/数组中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24346008/

10-12 12:59
查看更多