Csv vào bảng bootstrap

Tôi đang cố gắng bổ sung một tính năng của tùy chọn tải xuống CSV trong trang web của mình. Nó sẽ chuyển đổi bảng HTML có trong trang web thành nội dung CSV và làm cho nó có thể tải xuống. Tôi đã tìm kiếm thông qua internet để tìm một plugin tốt và tìm thấy một số loại hữu ích như http. //www. kỹ năng phát triển. com/export-html-table-to-csv-file/ Nhưng nó sử dụng PHP file để thực thi phần tải xuống. Tôi đã tự hỏi liệu có một thư viện JavaScript thuần túy có sẵn để thực hiện các tính năng này bằng cách sử dụng các phần mềm phía máy chủ như Node. js mà không sử dụng PHP ??

Csv vào bảng bootstrap

Joshua nhảy

7. 6164 Huy hiệu vàng60 Huy hiệu bạc63 Huy hiệu Đồng4 huy hiệu vàng60 huy hiệu bạc63 huy hiệu đồng

Đã hỏi ngày 21 tháng 3 năm 2013 lúc 12. 12 21/03/2013 lúc 12. 12

3

Nên làm việc trên mọi trình duyệt hiện đại và không có jQuery hoặc bất kỳ sự phụ thuộc nào, ở đây là sự phát triển của tôi

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ',') {
    // Select rows from table_id
    var rows = document.querySelectorAll('table#' + table_id + ' tr');
    // Construct csv
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {
            // Clean innertext to remove multiple spaces and jumpline (break csv)
            var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
            // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
            data = data.replace(/"/g, '""');
            // Push escaped string
            row.push('"' + data + '"');
        }
        csv.push(row.join(separator));
    }
    var csv_string = csv.join('\n');
    // Download it
    var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
    var link = document.createElement('a');
    link.style.display = 'none';
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Sau đó thêm nút tải xuống/liên kết của bạn

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>

Tệp CSV được hẹn giờ và tương thích với định dạng mặc định của Excel

Cập nhật sau khi nhận xét. Tham số thứ hai "Dấu tách" đã được thêm vào, nó có thể được sử dụng để định cấu hình một ký tự khác như

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
8, thật hữu ích nếu bạn có người dùng tải xuống CSV của mình ở các khu vực khác nhau trên thế giới vì họ có thể sử dụng một dấu phân cách mặc định khác cho Excel, để biết thêm thông tin Xem. https. // siêu người dùng. com/a/606274/908273

Đã trả ngày 30 tháng 5 năm 2019 lúc 1. 16 30 tháng 5 năm 2019 lúc 1. 16

Calumahcalumah Calumah

2. 6251 Huy hiệu vàng20 Huy hiệu bạc29 Huy hiệu đồng1 huy hiệu vàng20 huy hiệu bạc29 huy hiệu đồng

11

Chỉ sử dụng

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
9, Vanilla
 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
0 và Thư viện
 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
1

xuất sang html-bảng-as-csv-tệp-sử dụng-jquery

Set this code into a command file to beload in section

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
2.
 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})

ghi chú

Request JQuery and Table2CSV. Thêm lệnh tài liệu tham khảo tập tin vào cả hai thư viện trước tập lệnh ở trên

Selector

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
3 được sử dụng làm ví dụ và có thể được điều chỉnh để phù hợp với nhu cầu của bạn

Nó chỉ hoạt động trong các trình duyệt được hỗ trợ

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
4 full. Firefox, Chrome và Opera, không phải trong IE, chỉ hỗ trợ
 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
5 để nhúng dữ liệu hình ảnh nhị phân vào một trang phân tích

Đối với khả năng tương thích với trình duyệt đầy đủ, bạn sẽ phải sử dụng một cách tiếp cận hơi khác, yêu cầu lệnh tập tin phía máy chủ để

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
6 CSV

Đã trả ngày 21 tháng 3 năm 2013 lúc 17. 27 21/03/2013 lúc 17. 27

emerson. thủy quân lục chiến. marini emerson. nước biển

9. 2532 huy hiệu vàng28 Huy hiệu bạc45 Huy hiệu đồng2 huy hiệu vàng28 huy hiệu bạc45 huy hiệu đồng

8

Có một giải pháp nguồn mở và miễn phí rất dễ dàng tại http. // jordiburgos. com/post/2014/excellentexport-javascript-export-to-excel-csv. html

Lần đầu tiên tải xuống tệp JavaScript và tệp mẫu từ https. //github. com/jmaister/excellentexport/phát hành/thẻ/v1. 4

Trang HTML trông giống như bên dưới

Tệp JavaScript bảo đảm nằm trong cùng một thư mục hoặc thay đổi đường dẫn của tệp lệnh trong tệp HTML tương ứng

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
2

Nó rất dễ sử dụng điều này vì tôi đã thử hầu hết các phương pháp khác

Đã trả ngày 29 tháng 1 năm 2015 lúc 14. 00 29 tháng 1, 2015 lúc 14. 00

2

Bạn không cần tập lệnh PHP ở phía máy chủ. Chỉ làm điều đó ở phía máy khách, trong trình duyệt chấp nhận URI dữ liệu

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
3

URI data will same as

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
4

You can call here is URI by way

  • Sử dụng
     $(document).ready(function () {
        $('table').each(function () {
            var $table = $(this);
    
            var $button = $("<button type='button'>");
            $button.text("Export to spreadsheet");
            $button.insertAfter($table);
    
            $button.click(function () {
                var csv = $table.table2CSV({
                    delivery: 'value'
                });
                window.location.href = 'data:text/csv;charset=UTF-8,' 
                + encodeURIComponent(csv);
            });
        });
    })
    
    7
  • or setting
     $(document).ready(function () {
        $('table').each(function () {
            var $table = $(this);
    
            var $button = $("<button type='button'>");
            $button.text("Export to spreadsheet");
            $button.insertAfter($table);
    
            $button.click(function () {
                var csv = $table.table2CSV({
                    delivery: 'value'
                });
                window.location.href = 'data:text/csv;charset=UTF-8,' 
                + encodeURIComponent(csv);
            });
        });
    })
    
    8
  • or by href of a mine neo
  • Bằng cách thêm thuộc tính tải xuống, nó sẽ hoạt động trong Chrome, vẫn phải kiểm tra trong IE

Để kiểm tra, chỉ cần sao chép URI ở trên và dán vào thanh địa chỉ trình duyệt của bạn. Hoặc kiểm tra neo bên dưới trong trang HTML

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
7

Để tạo nội dung, nhận các giá trị từ bảng, bạn có thể sử dụng TABE2CSV được đề cập bởi Melanciauk và DO

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
8

Đã trả lời ngày 14 tháng 11 năm 2013 lúc 19. 31 14/11/2013 lúc 19. 31

ITALO BORSSATTOITALO BORSSATTO Italo Borssatto

14,5K7 Huy hiệu vàng64 Huy hiệu bạc86 Huy hiệu đồng7 huy hiệu vàng64 huy hiệu bạc86 bronze badges

(1) Đây là giải pháp JavaScript bản địa cho vấn đề này. Nó hoạt động trên hầu hết các trình duyệt hiện đại

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
9____10____10

Bên cạnh đó, FileSaver. js sẽ không chịu trách nhiệm xây dựng nội dung để xuất. Bạn phải tự xây dựng nội dung theo định dạng bạn muốn

Đã trả lời ngày 24 tháng 2 năm 2020 lúc 7. 03 24/02/2020 lúc 7. 03

Dabengdabeng dabeng

1. 14013 Huy hiệu bạc7 Huy hiệu đồng13 huy hiệu bạc7 huy hiệu đồng

Sử dụng câu trả lời ở trên, nhưng đã thay đổi nó cho nhu cầu của tôi

Tôi đã sử dụng các chức năng sau và đã nhập vào tệp React của mình, nơi tôi cần tải xuống tệp CSV. REACT nơi tôi cần tải xuống tệp csv

Tôi đã có thẻ

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
9 trong các yếu tố thành phần
<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
20 của tôi. Đã thêm ý kiến ​​vào những gì hầu hết các chức năng/phương pháp làm.
<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
1

Khi người dùng nhấp vào Xuất sang CSV, nó sẽ kích hoạt chức năng sau trong React

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
2

Ví dụ Bảng các phần tử HTML

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
3

Đã trả ngày 3 tháng 1 năm 2019 lúc 18. 55 3 tháng 1, 2019 lúc 18. 55

Roger Perezroger Perez Roger Perez

2. 40826 Huy hiệu bạc29 Huy hiệu đồng26 huy hiệu bạc29 huy hiệu đồng

1

Một giải pháp hiện đại

Hầu hết các giải pháp được đề xuất ở đây sẽ bị phá vỡ với các bảng lồng nhau hoặc các yếu tố khác bên trong các yếu tố thành phần TD của bạn. Tôi thường xuyên sử dụng các yếu tố khác trong bảng của mình, nhưng chỉ muốn xuất bảng trên cùng. Tôi đã lấy một số mã được tìm thấy ở đây từ Calumah và thêm vào một số Vanilla Es6 JS hiện đại

Sử dụng TextContent là một giải pháp tốt hơn bên trong vì bên trong sẽ trả về bất kỳ HTML nào bên trong phần tử TD của bạn. Tuy nhiên, ngay cả TextContent cũng sẽ trả lại văn bản từ các yếu tố lồng nhau. Một giải pháp thậm chí còn tốt hơn là sử dụng các thuộc tính dữ liệu tùy chỉnh trên TD của bạn và kéo các giá trị CSV cho bạn từ đó. textContent là một giải pháp tốt hơn InternalText vì InternalText sẽ trả về bất kỳ HTML nào bên trong các phần tử td của bạn. Tuy nhiên, ngay cả textContent cũng sẽ trả về văn bản từ các phần tử lồng nhau. Một giải pháp tốt hơn nữa là sử dụng các thuộc tính dữ liệu tùy chỉnh trên td của bạn và lấy các giá trị cho CSV của bạn từ đó

Mã hóa hạnh phúc

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
4

chỉnh sửa. clonenode () được cập nhật lên clonenode (true) để có mặt trong

Đã trả ngày 9 tháng 1 năm 2021 lúc 5. 34 9 tháng 1 năm 2021 lúc 5. 34

Tôi thấy có một thư viện cho công việc này. Xem ví dụ ở đây

https. // biên tập viên. bảng dữ liệu. net/ví dụ/tiện ích mở rộng/xuất Nút. html

Ngoài mã trên, các tệp thư viện JavaScript sau đây được tải xuống để sử dụng trong ví dụ này

Trong HTML, bao gồm các tập lệnh sau

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
5

Bật nút bằng cách thêm các lệnh tập tin như

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
6

Do một số lý do, xuất khẩu Excel dẫn đến tệp bị hỏng, nhưng có thể sửa chữa được. Ngoài ra, vô hiệu hóa Excel và sử dụng CSV xuất

Đã trả ngày 3 tháng 12 năm 2015 lúc 20. 23 3 tháng 12, 2015 lúc 20. 23

Jzhoujzhou jzhou

Phù hiệu bằng đồng 911 Huy hiệu đồng1 huy hiệu bạc2 huy hiệu đồng

0

Tôi đã sử dụng chức năng của Calumah được đăng ở trên, nhưng tôi đã gặp phải một vấn đề với mã của anh ấy như là thơ

Các hàng được nối với một dấu chấm phẩy

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
7

Nhưng liên kết được tạo có "Văn bản/CSV" là loại nội dung

Có thể trong Windows không phải là vấn đề, nhưng trong Excel cho Mac đã loại bỏ mọi thứ. Tôi đã thay đổi mảng tham gia thành phần thưởng và nó hoạt động hoàn hảo