如何在脱机时将txt / csv文件加载到javascript字符串/数组中

Question

我有一个小的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函数在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"'); 
            }
        }
    }

Answer 1

这在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>

Answer 2

目前还不清楚你想做什么。

使用jQuery可以修改DOM中发生的事件。 使用此功能，您可以在完成更改后保存源代码。 然后，您需要使用保存的代码替换当前源代码，以便在下次打开页面时使用更改。 然而，这将是一个非常费力的过程，并且可能有许多更好的方法来完成你想做的事情，具体取决于它是什么。

此外，关于Shota的帖子。 除非您在后台运行服务器，否则无法使用AJAX。 如果您决定在服务器上设置系统，则可以使用许多选项来完成您想要的操作。

Answer 3

如您所知，任何基于AJAX的解决方案都会受到本地文件访问的安全限制的影响。 您可以采用JSONP方式避免使用AJAX，而不是找到特定于浏览器的解决方法。

这将要求您预处理CSV数据并以更加JS友好的格式保存。 但无论如何这都是一个好主意，因为本机JS解析可能比JS中实现的CSV解析器表现更好。

它看起来大致如下：

的index.html

    </head>
    <body>
        <div id="page-wrapper">
        <div> 
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"></pre> <!-- display any output here -->

        </div>
        <script src="script.js"></script>
        <script src="data.js"></script>
    </body>
</html>

的script.js

function processData(data) {
    // Your logic
    // (will be called once data.js is loaded)
}

data.js

processData([
    ["your", "data"]
]);

Answer 4

我的评论太长了。

您不能以与媒体相同的方式包含数据文件。 最简单的方法是将csv预处理为js数组，然后包含csv，如js <script src="mydata.csv.js"></script> 。

离线你的意思是本地文件而不是公开？ 第一个建议是升级您的浏览器。 如果它是支持所有主流浏览器的本地文件，那么它就没有意义。 对不起，我相信你有理由不能。 但升级将绕过ie8的非Ecmascript 5支持。

要绕过跨源策略，您必须在本地Web服务器上运行您的文件。 因此，您的html页面将类似于localhost：8080和您的csv localhost：8080 / mydata.csv这为html提供了权限，允许访问csv文件，因为它们现在位于同一个域中。 D3，jquerycsv现在应该可以工作了。 它存在很大的安全风险，允许任何html文件自由访问文件系统。

如果本地服务器不是一个选项。 每次加载输入字段时都必须选择文件。 这将授予浏览器访问此文件的权限。

选择文件后，要读取主浏览器的内容（使用Ecma5），请查看MDN上的FileReader ，此处可以找到使用示例。 对于ie8 + 9，有VBscript支持读取文件。 你可以像使用<script type="text/vbscript"></script>一样使用VB

Answer 5

如果您确实想要从服务器页面访问本地资源，那么您还需要一个允许访问的本地页面。 <iframe>本地HTML页面可以通过window.postMessage()读取文本文件并将内容发布到主页面。

可能还有一种方法可以使用HTML5 iframe和sandbox属性，但不能在IE9及更低版本中使用。

看到：

如何在脱机时将txt / csv文件加载到javascript字符串/数组中

问题描述

5 个解决方案

解决方案1
1 2014-06-21 22:36:40

解决方案2
0 2014-06-21 22:23:52

解决方案3
0 2014-06-30 22:36:27

解决方案4
0 2014-07-01 02:06:01

解决方案5
0 2014-07-01 13:30:40

如何在脱机时将txt / csv文件加载到javascript字符串/数组中

问题描述

5 个解决方案

解决方案1 1 2014-06-21 22:36:40

解决方案2 0 2014-06-21 22:23:52

解决方案3 0 2014-06-30 22:36:27

解决方案4 0 2014-07-01 02:06:01

解决方案5 0 2014-07-01 13:30:40

解决方案1
1 2014-06-21 22:36:40

解决方案2
0 2014-06-21 22:23:52

解决方案3
0 2014-06-30 22:36:27

解决方案4
0 2014-07-01 02:06:01

解决方案5
0 2014-07-01 13:30:40