js网页下载csv格式的表格

时间：2023-03-09 05:32:07
js网页下载csv格式的表格 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

         table{

            border:1px solid #ddd;

            border-collapse: collapse;

        }

        td, th{

            border:1px solid #ddd;

            padding:3px;

        }

    </style>

</head>

<body>

    <table id="score">

        <thead>

            <th>Name</th>

            <th>Math</th>

            <th>Physics</th>

            <th>Chemistry</th>

        </thead>

        <tbody>

            <tr>

                <td>Melanie</td>

                <td>100</td>

                <td>80</td>

                <td>90</td>

            </tr>

            <tr>

                <td>Thomas</td>

                <td>99</td>

                <td>100</td>

                <td>90</td>

            </tr>

            <tr>

                <td>Ada中国</td>

                <td>100</td>

                <td>70</td>

                <td>95</td>

            </tr>

        </tbody>

    </table>

    <br>

    <button id="btn">Download</button>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>

            var btn = document.getElementById('btn');

            btn.onclick = function() {

              downloadTable('score', 'score.csv');

            };

            var columnDelimiter = "\t"; //列分割符

            var lineDelimiter = "\n";  //行分割符

            function downloadTable(tableId, fileName) {

              var scoreTable = document.getElementById(tableId);

              var head = scoreTable.tHead;

              var ths = head.getElementsByTagName('th');

              var trs = scoreTable.tBodies[0].getElementsByTagName('tr');

              var result = '';

              for(let i=0,l=ths.length; i<l; i++){

                result += ths[i].innerHTML + columnDelimiter;

              }

              result += lineDelimiter;

              for(let i=0, l=trs.length; i<l; i++){

                let tds = trs[i].getElementsByTagName('td');

                for(let j=0, l2=tds.length; j<l2; j++){

                  result += tds[j].innerHTML + columnDelimiter;

                }

                result += lineDelimiter;

              }

              var blob = new Blob([new Uint8Array(_toUtf16LE(result))], {type: "text/csv;charset=UTF-16;"});

              var downloadLink = document.createElement("a");

              if ('download' in downloadLink) {

                var url = URL.createObjectURL(blob);

                downloadLink.href = url;

                downloadLink.download = fileName;

                downloadLink.hidden = true;

                document.body.appendChild(downloadLink);

                downloadLink.click();

                document.body.removeChild(downloadLink);

              }else{

                if(navigator.msSaveBlob){ //IE10+

                  navigator.msSaveBlob(blob, fileName);

                }

              }

            }

            function _toUtf16LE(str) {

              var charCode, byteArray = [],

                  len = str.length;

              byteArray.push(255, 254); // LE BOM

              for (var i = 0; i < len; ++i) {

                charCode = str.charCodeAt(i);

                // LE Bytes

                byteArray.push(charCode & 0xff);

                byteArray.push(charCode / 256 >>> 0);

              }

              return byteArray;

            }

    </script>

</body>

</html>

相关文章