Hướng dẫn embed csv in html

I'm trying to import a local CSV file with headings into a local HTML file, which will then display as a table in a browser.

I haven't been learning HTMLand JavaScript for long, so I don't know a lot about importing and converting. What I need is some advice or possibly a basic script describing the sort of function I need. Explanations and advice are all welcomed!

This is an example of the csv file:

    heading1,heading2,heading3,heading4,heading5
    value1_1,value1_2,value1_3,value1_4,value1_5
    value2_1,value2_2,value2_3,value2_4,value2_5
    value3_1,value3_2,value3_3,value3_4,value3_5
    value4_1,value4_2,value4_3,value4_4,value4_5
    value5_1,value5_2,value5_3,value5_4,value5_5

This is how I'd want to display it:

http://jsfiddle.net/yekdkdLm

In this article I will explain with an example, how to embed (display) CSV File in Web Page (Browser) using JavaScript and HTML5 File API.

First the CSV file i.e. Comma separated Text file, will be read using HTML5 FileReader API as String.

Then the String will be parsed into Rows and Columns and will be displayed as HTML Table on Web Page in Browser.

Embed (Display) CSV File in Web Page (Browser) using JavaScript

The HTML Markup consists of a FileUpload control (HTML File Input) and a HTML Button i.e. Upload.

When the Button is clicked, the Upload JavaScript function is called.

Inside the function, first a check is performed to verify whether the file is a valid CSV or a text file. Then a check is performed to make sure whether the browser supports HTML5 File API.

Once the above checks are cleared then the contents of the CSV file are read as text string and then the string is split into parts using comma and new line characters and finally is displayed as an HTML Table.

<script type="text/javascript">

    function Upload() {

        var fileUpload = document.getElementById("fileUpload");

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;

        if (regex.test(fileUpload.value.toLowerCase())) {

            if (typeof (FileReader) != "undefined") {

                var reader = new FileReader();

                reader.onload = function (e) {

                    var table = document.createElement("table");

                    var rows = e.target.result.split("\n");

                    for (var i = 0; i < rows.length; i++) {

                        var cells = rows[i].split(",");

                        if (cells.length > 1) {

                            var row = table.insertRow(-1);

                            for (var j = 0; j < cells.length; j++) {

                                var cell = row.insertCell(-1);

                                cell.innerHTML = cells[j];

                            }

                        }

                    }

                    var dvCSV = document.getElementById("dvCSV");

                    dvCSV.innerHTML = "";

                    dvCSV.appendChild(table);

                }

                reader.readAsText(fileUpload.files[0]);

            } else {

                alert("This browser does not support HTML5.");

            }

        } else {

            alert("Please upload a valid CSV file.");

        }

    }

</script>

<input type="file" id="fileUpload" />

<input type="button" id="upload" value="Upload" onclick="Upload()" />

<hr />

<div id="dvCSV">

</div>

Screenshots

Contents of the CSV file placed on user’s folder

The CSV file being displayed in browser as HTML Table

Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

* All browser logos displayed above are property of their respective owners.

Downloads

Download Free Word/PDF/Excel API

How do you insert a CSV file in HTML?

<script type="text/javascript">.

</script>.

<input type="file" id="fileUpload" />.

<input type="button" id="upload" value="Upload" onclick="Upload()" />.

<hr />.

<div id="dvCSV">.

</div>.

How do I display a CSV file in HTML?

One method is to use <pre>… </pre> tags. Pre tags will preserve the text formatting used in your CSV file. This is the easier approach, and does not require text transformation of the CSV file.

Can HTML read CSV?

HTML5 provide FileReader API to read CSV file using JavaScript. You can read CSV file from a local or remote location. The Local files are opened with FileReader API, and remote files are downloaded with XMLHttpRequest . This tutorial help to read CSV file using HTML5 and Papa parse library.

How do I upload a CSV file to my website?

Procedure.

First, you must create a CSV file that includes the work items you want to import. ... .

On your project page, click CREATE > Import from CSV File..

In the Import work items from CSV files page, in the Data tab, click Browse. ... .

Alternatively, click MAPPING to use your own mapping file:.