All geek questions in one place

How to load txt / csv file into javascript string / array offline

I have a small html / javascript webpage that I want to run offline.

In the same way, the page can include an image or css file and use it offline, I want to include a 3mb table that javascript reads in a 2d array, and I hope for something that will work on IE8 as well as modern browsers .

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

I found several methods on the Internet, for example

<script src="jquery-csv.js"></script>
var table = $.csv.toArrays("spreadsheet.csv");

or

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

or

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

But I usually get errors with the same source code, such as:

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.

I can not get them to work offline. How could I do this?

Edit:

Firefox, CSVToArray , 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 , 3 , activex , script .

    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"'); 
            }
        }
    }
+4
5

IE8, API- HTML5 . :

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>
+1

, .

jQuery , DOM. , , . , . , , , , , , , .

, Shota. AJAX, , . , , .

0

, AJAX . JSONP , AJAX.

CSV JS . , JS, , , CSV, JS.

:

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"]
]);
0

.

, . - csv js, csv js <script src="mydata.csv.js"></script>.

, ? - . , . , , , . ecmascript 5 ie8.

, -. , html- - localhost: 8080 csv localhost: 8080/mydata.csv, html, CSV , . D3, jquerycsv . , html .

. , . .

, ( Ecma5), FileReader MDN . ie8 + 9 VBscript . VB , JS, <script type="text/vbscript"></script>

0

Source: https://habr.com/ru/post/1545513/

More articles:


All Articles