papaparse实现解析浏览器打开csv表格效果代码-html代码-BFW代码库

papaparse实现解析浏览器打开csv表格效果代码

代码语言：html

所属分类：表格

代码描述：papaparse实现解析浏览器打开csv表格效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        table {
          border-collapse: collapse;
          border-radius: 5px;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
          overflow: hidden;
          font-family: "Quicksand", sans-serif;
          font-weight: bold;
          font-size: 14px;
        }
        
        th {
          background: #009578;
          color: #ffffff;
          text-align: left;
        }
        
        th,
        td {
          padding: 10px 20px;
        }
        
        tr:nth-child(even) {
          background: #eeeeee;
        }
    </style>



</head>

<body>

    <input type="file" id="csvFileInput" style="padding-bottom: 15px">
    <table id="csvRoot"></table>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/papaparse.min.js"></script>


    <script>
        class TableCsv {
          /**
           * @param {HTMLTableElement} root The table element which will display the CSV data.
           */
          constructor(root) {
            this.root = root;
          }
        
          /**
           * Clears existing data in the table and replaces it with new data.
           *
           * @param {string[][]} data A 2D array of data to be used as the table body
           * @param {string[]} headerColumns List of headings to be used
           */
          update(data, headerColumns = []) {
            this.clear();
            this.setHeader(headerColumns);
            this.setBody(data);
          }
        
          /**
           * Clears all contents of the table (incl. the header).
           */
          clear() {
            this.root.innerHTML = "";
          }
        
 .........完整代码请登录后点击上方下载按钮下载查看