如何在脫機時將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