当前位置： 移动技术网 > IT编程>网页制作>HTML > csv 文件内容读取显示在html表格

csv 文件内容读取显示在html表格

2020年07月17日  | 移动技术网IT编程  | 我要评论 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>

<body>
  <div class="userlist">

    <table id="ut">

      <tr>

        <td>name</td>

        <td>age</td>

        <td>id</td>

      </tr>

    </table>

  </div>
  <script>

    //url转blob
    function urlToBlob() {
      let file_url =
        'http://orbbec-algorithm-platform-test.oss-cn-shenzhen.aliyuncs.com/2020_07_15/3e558b38-091a-4be9-b418-a735dae33d6c.csv'
      let xhr = new XMLHttpRequest();
      xhr.open("get", file_url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          // if (callback) {
          // callback();
          console.log(this.response)
          const reader = new FileReader()
          reader.onload = function () {
            console.log('reader.result', reader.result)
            csvToTable(reader.result)
          }
          reader.readAsText(this.response);
        }
      };
      xhr.send();
    }
    urlToBlob()
    function csvToTable(content){
     var mtr = document.getElementById("ut");
     var frag = document.createDocumentFragment();
    // 对csv文件的数据先以行分割
    var  userList = content.split("\n");
    // 我们在对每一行以逗号作分割
    for (i = 0; i < userList.length; i++) {

      userary = userList[i].split(",");
      tr = document.createElement("tr");
      // 对每行的内容遍历到td标签去

      for (j = 0; j < userary.length; j++) {

        td = document.createElement("td");
        td.append(userary[j]);
        tr.appendChild(td);
      }
      frag.appendChild(tr);
    }
    // 加载到web页面
    mtr.appendChild(frag);
    }
  </script>
</body>

</html>

 

本文地址：https://blog.csdn.net/qq_33878858/article/details/107361684

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网