Hướng dẫn javascript export table to csv - bảng xuất javascript sang csv

Tôi đang cố gắng thêm 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 cho một plugin tốt và tìm thấy một số loại hữu ích như http://www.dev-skills.com/export-html-table-to-csv-file/ Nhưng nó sử dụng tập lệnh PHP để thực hiện phần tải xuống. Tôi đã tự hỏi nếu có một thư viện JavaScript thuần túy có sẵn để thực hiện 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 ??

Joshua nhảy

7.6164 Huy hiệu vàng60 Huy hiệu bạc63 Huy hiệu Đồng4 gold badges60 silver badges63 bronze badges

Đã hỏi ngày 21 tháng 3 năm 2013 lúc 12:12Mar 21, 2013 at 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à triển khai 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:

Download as CSV

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

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

Download as CSV

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ì chúng 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://superuser.com/a/606274/908273

Đã trả lời ngày 30 tháng 5 năm 2019 lúc 1:16May 30, 2019 at 1:16

CalumahcalumahCalumah

2.6251 Huy hiệu vàng20 Huy hiệu bạc29 Huy hiệu đồng1 gold badge20 silver badges29 bronze badges

11

Chỉ sử dụng

Download as CSV

9, Vanilla

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

        var $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.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:

export-to-html-table-as-csv-file-using-jquery

Đặt mã này vào một tập lệnh để được tải trong phần

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

        var $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.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);
        });
    });
})

Notes:

Yêu cầu JQuery và Bảng2CSV: Thêm tài liệu tham khảo tập lệnh vào cả hai thư viện trước tập lệnh ở trên.

Bộ chọn

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

        var $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 với hỗ trợ

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

        var $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 đầy đủ: 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.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.

Đối với khả năng tương thích 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 tập lệnh phía máy chủ để

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

        var $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ả lời ngày 21 tháng 3 năm 2013 lúc 17:27Mar 21, 2013 at 17:27

emerson.mariniemerson.mariniemerson.marini

9.2532 huy hiệu vàng28 Huy hiệu bạc45 Huy hiệu đồng2 gold badges28 silver badges45 bronze badges

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à các tệp mẫu từ https://github.com/jmaister/excellentexport/releases/tag/v1.4

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

Đảm bảo tệp JavaScript 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.

    
    
    


    
ExcellentExport.js

    Check on jordiburgos.com and  GitHub.

    
Test page

    


    Export to Excel
    


    Export to CSV
    


    

        

            
Column 1
            
Column "cool" 2
            
Column 3
        
        

            
100,111
            
200
            
300
        
        

            
400
            
500
            
600
        
        

            
Text
            
More text
            
Text with
                new line
        
    

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ả lời ngày 29 tháng 1 năm 2015 lúc 14:00Jan 29, 2015 at 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 các trình duyệt chấp nhận dữ liệu URI:

data:application/csv;charset=utf-8,content_encoded_as_url

URI dữ liệu sẽ giống như:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

Bạn có thể gọi đây là URI bằng cách:

• Sử dụng

   $(document).ready(function () {
      $('table').each(function () {
          var $table = $(this);
  
          var $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
• hoặc thiết lập

   $(document).ready(function () {
      $('table').each(function () {
          var $table = $(this);
  
          var $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
• hoặc bởi href của một mỏ 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:

Example

Để 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:

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

Đã trả lời ngày 14 tháng 11 năm 2013 lúc 19:31Nov 14, 2013 at 19:31

ITALO BORSSATTOITALO BORSSATTOItalo Borssatto

14,5K7 Huy hiệu vàng64 Huy hiệu bạc86 Huy hiệu đồng7 gold badges64 silver badges86 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.

function export2csv() {
  let data = "";
  const tableData = [];
  const rows = document.querySelectorAll("table tr");
  for (const row of rows) {
    const rowData = [];
    for (const [index, column] of row.querySelectorAll("th, td").entries()) {
      // To retain the commas in the "Description" column, we can enclose those fields in quotation marks.
      if ((index + 1) % 3 === 0) {
        rowData.push('"' + column.innerText + '"');
      } else {
        rowData.push(column.innerText);
      }
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #aaa;
  padding: 0.5rem;
  text-align: left;
}

td {
  font-size: 0.875rem;
}

.btn-group {
  padding: 1rem 0;
}

button {
  background-color: #fff;
  border: 1px solid #000;
  margin-top: 0.5rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

____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:03Feb 24, 2020 at 7:03

Dabengdabengdabeng

1.14013 Huy hiệu bạc7 Huy hiệu đồng13 silver badges7 bronze badges

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 chức năng sau và được 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 file where I needed to download the csv file.

Tôi đã có thẻ

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

        var $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ố

    
    
    


    
ExcellentExport.js

    Check on jordiburgos.com and  GitHub.

    
Test page

    


    Export to Excel
    


    Export to CSV
    


    

        

            
Column 1
            
Column "cool" 2
            
Column 3
        
        

            
100,111
            
200
            
300
        
        

            
400
            
500
            
600
        
        

            
Text
            
More text
            
Text with
                new line
        
    

0 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.

Download as CSV

1

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

Download as CSV

2

Ví dụ Bảng HTML elems.

Download as CSV

3

Đã trả lời ngày 3 tháng 1 năm 2019 lúc 18:55Jan 3, 2019 at 18:55

Roger Perezroger PerezRoger Perez

2.40826 Huy hiệu bạc29 Huy hiệu đồng26 silver badges29 bronze badges

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ố 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 các 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ị cho bạn CSV từ đó.textContent is a better solution than innerText as innerText will return any HTML inside your td elements. However, even textContent will return the text from nested elements. An even better solution is to use custom data attributes on your td and pull the values for you CSV from there.

Mã hóa hạnh phúc!

Download as CSV

4

Chỉnh sửa: clonenode () được cập nhật lên clonenode (true) để có được bên trong

Đã trả lời ngày 9 tháng 1 năm 2021 lúc 5:34Jan 9, 2021 at 5:34

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

https://editor.datatables.net/examples/extensions/exportButtons.html

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

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

Download as CSV

5

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

Download as CSV

6

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

Đã trả lời ngày 3 tháng 12 năm 2015 lúc 20:23Dec 3, 2015 at 20:23

Jzhoujzhoujzhou

Phù hiệu bằng đồng 911 Huy hiệu đồng1 silver badge2 bronze badges

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

Download as CSV

7

Nhưng liên kết được tạo có "Text/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 dấu phẩy và nó hoạt động hoàn hảo.

Đã trả lời ngày 27 tháng 2 năm 2020 lúc 21:08Feb 27, 2020 at 21:08