Hướng dẫn how do i import a csv file into html table? - làm cách nào để nhập tệp csv vào bảng html?

Tôi đang tạo một trang bảng đơn giản và tôi không muốn thêm hàng thủ công bằng HTML. Tôi có khoảng 100 hàng dữ liệu và tôi đang làm việc trong một môi trường tĩnh để JavaScript là lựa chọn duy nhất tôi có (hoặc là người duy nhất tôi biết có thể có thể làm điều này).

Tôi đã thử một số hướng dẫn và đã tìm cách nhập CSV vào HTML. Tôi đã sử dụng hướng dẫn này và nó hoạt động như Charm.

Nhưng vấn đề là hướng dẫn sử dụng thẻ <input> để lấy đối tượng tệp. Tôi chỉ có một tệp CSV duy nhất được lưu trữ cục bộ trong cùng một thư mục với trang web. Tôi đã thử tìm kiếm các đối tượng tệp và đốm màu nhưng tôi không thể làm cho nó hoạt động cho đến nay. Không có chức năng nào của tôi hoạt động.

Đây là những gì tôi muốn trang của tôi làm:

Khi mở, tôi muốn trang của mình tải trực tiếp dữ liệu từ CSV và đặt nó vào bảng. Tôi biết làm thế nào để thêm mã bảng vào trang HTML bằng cách sử dụng bên trong nhưng tôi không thể nhập dữ liệu CSV thực tế. Xin vui lòng giúp đỡ!

hỏi ngày 12 tháng 7 năm 2021 lúc 8:54Jul 12, 2021 at 8:54

Vì lý do bảo mật, nó không được phép đọc các tệp hệ điều hành với JS từ trình duyệt. Đối với điều này, bạn phải có tệp CSV và trang HTML từ nơi bạn muốn đọc nó trên cùng một máy chủ và sử dụng AJAX hoặc một số ngôn ngữ phía máy chủ tạo ra JSON. Tôi cho bạn một ví dụ trong ajax

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

function processData(allText) {
    var record_num = 5;  // or however many columns there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert

Hoặc sử dụng thư viện này https://www.csssscript.com/lightwight-csv-table-converter-csvtotable-js/

Đã trả lời ngày 12 tháng 7 năm 2021 lúc 9:01Jul 12, 2021 at 9:01

1

Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách nhập tệp CSV vào bảng HTML bằng API tệp JavaScript và HTML5.

Đầu tiên, tệp CSV, tức là tệp văn bản được phân tách bằng dấu phẩy, sẽ được đọc bằng API Filereader HTML5 dưới dạng chuỗi.

Sau đó, chuỗi sẽ được phân tích cú pháp vào các hàng và cột và sẽ được hiển thị trong bảng HTML.

Nhập tệp CSV vào bảng HTML bằng JavaScript

Đánh dấu HTML bao gồm một điều khiển tải FilePload (đầu vào tệp HTML) và nút HTML tức là tải lên.

Khi nút được nhấp, chức năng tải lên JavaScript được gọi.

Bên trong chức năng, đầu tiên một kiểm tra được thực hiện để xác minh xem tệp là CSV hoặc tệp văn bản hợp lệ. Sau đó, kiểm tra được thực hiện để đảm bảo liệu trình duyệt có hỗ trợ API tệp HTML5 hay không.

Khi các kiểm tra trên được xóa thì nội dung của tệp CSV được đọc dưới dạng chuỗi văn bản và sau đó chuỗi được chia thành các phần bằng dấu phẩy và các ký tự dòng mới và cuối cùng được hiển thị dưới dạng bảng HTML.

<script type="text/javascript">

Ảnh chụp màn hìnhfunction Upload() {

Nội dung của tệp CSV được đặt trên thư mục người dùngvar fileUpload = document.getElementById("fileUpload");

Tệp CSV được hiển thị trong Trình duyệt dưới dạng bảng HTMLvar regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;

tính tương thích của trình duyệt webif (regex.test(fileUpload.value.toLowerCase())) {

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.if (typeof (FileReader) != "undefined") {

& nbsp; & nbsp; & nbsp; & nbsp;var reader = new FileReader();

* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ.function (e) {

Tải xuốngvar table = document.createElement("table");

Tải xuống API Word/PDF/Excel miễn phívar rows = e.target.result.split("\n");

Làm thế nào để bạn nhập tệp CSV vào HTML?for (var i = 0; i < rows.length; i++) {

Biểu mẫu đầu vào này tương đương về mặt chức năng với biểu mẫu được sử dụng trong tải lên một tệp. Tệp mà bạn chọn tải lên phải là tệp CSV với. ... hình thức đầu vào HTML ..var cells = rows[i].split(",");

Làm cách nào để chèn tệp CSV vào bảng?if (cells.length > 1) {

Nhấp chuột phải vào bất kỳ bảng nào và bạn sẽ thấy hai tùy chọn khác nhau để chọn trình hướng dẫn, một để xuất dữ liệu và một tùy chọn khác để nhập dữ liệu. Chọn cái sau để mở trình hướng dẫn nhập. Chọn nguồn dữ liệu. Sau khi mở trình hướng dẫn nhập, nó sẽ hỏi bạn về đường dẫn của tệp CSV.var row = table.insertRow(-1);

Tôi có thể chuyển đổi CSV thành HTML không?for (var j = 0; j < cells.length; j++) {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var cell = row.insertCell (-1);var cell = row.insertCell(-1);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cell.innerhtml = tế bào [j];

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var dvcsv = document.getEuityById ("dvcsv");var dvCSV = document.getElementById("dvCSV");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; dvcsv.innerhtml = "";"";

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; DVCSV.AppendChild (Bảng);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; reader.readastext (fileupload.files [0]);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;"This browser does not support HTML5.");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cảnh báo ("Vui lòng tải lên tệp CSV hợp lệ.");"Please upload a valid CSV file.");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; }

script>

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

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

<hr />

<div id="dvCSV">

div>

Ảnh chụp màn hình

Nội dung của tệp CSV được đặt trên thư mục người dùng

Tệp CSV được hiển thị trong Trình duyệt dưới dạng bảng HTML

tính tương thích của trình duyệt web

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.

* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ.

Tải xuống

Tải xuống API Word/PDF/Excel miễn phí

Làm thế nào để bạn nhập tệp CSV vào HTML?

Làm cách nào để chèn tệp CSV vào bảng?

Tôi có thể chuyển đổi CSV thành HTML không?

Làm cách nào để tải xuống một bảng từ CSV xuống trang web của tôi?