HTML表をCSVファイルに変える方法

10296 ワード
html table csv javascript テキストリンク
テーブルをCSVファイルに変換するには、HTMLテーブルを作成し、テーブルを指定してテーブルを参照するためのIDを与えます.
<!DOCTYPE html>
<html>
<head>
  <title>how to convert table to CSV file</title>
</head>
<body>
      <table style="width:100% "id="id1">


 <tbody>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
    <tr>

     <td>orange</td>
     <td>#210</td>
    </tr>


    <tr>

      <td>apple</td>
      <td>#400</td>
    </tr>

    </tbody>

</table>

<button onclick="download_table_as_csv();">Convert To CSV File</button>
今、私たちはテーブルをCSVファイルに変換するJSコードを作成します
<script >
              function download_table_as_csv(table_id="id1", separator = ",") {
                // Select rows from table_id
                var rows = document.querySelectorAll("table#" + table_id + " tr");
                // Construct csv
                var csv = [];
                  //looping through the table
                for (var i = 0; i < rows.length; i++) {
                    var row = [], cols = rows[i].querySelectorAll("td, th");
                       //looping through the tr
                    for (var j = 0; j < cols.length; j++) {
                       // removing space from the data
                        var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, "").replace(/(\s\s)/gm, " ")
                         // removing double qoute from the data
                        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);
            }

             </script>
</body >
</html>
CSVファイルへの変換をクリックすると、テーブルがCSVファイルに変換されます
は常に学ぶために準備ができて、任意の追加のコメントを自由に感じて
Vue SpringBoot Excelのダウンロード
vueフィルタは小数を2桁保持