HTML 前端表格处理与保存

HTML JS EXCEL

这次分享一下 web 开发时，使用到的 EXCEL 表格的处理方法， 其中 包含读取、展示、处理、下载等；

JS 读取 EXCEL

通过导入xlsx.full.min.js 使用 JS 代码读取文件内容，JS 代码如下：

function readExcel(file_obj){
    document.values_dat = 0
    var reader = new FileReader();
    var file = file_obj.files[0];
    if (file == null){
        return;
    }
    if(file['name'].search(".xls") === -1 && file['name'].search(".xlsx") === -1){
       alert("选择Excel格式的文件导入！");
       return;
    }
    reader.readAsBinaryString(file);
    reader.onload = function (e) {
        var data = e.target.result;
        var wb = XLSX.read(data, {type: 'binary'});

        sheetName = wb.SheetNames[0]   // 获取文档中第一个sheet页签的名字
        sheets = wb.Sheets[sheetName]   // 获sheet名页签下的数据
    };
}

<input type="file" onchange="readExcel(this)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>

前端代码 使用 onchange 调用 js 方法便可以提取到 excel 里面的 内容了

展示 EXCEL 内容

var message = 'ok'
document.getElementById('title').innerHTML = message

let search_dat = [
{"序号": 1, "标题": "One"},
{"序号": 2, "标题": "Two"},
{"序号": 3, "标题": "Three"},
]

let tbody =''
for (let t in search_dat){
  let value = search_dat[t]
  let hbody = ''
  for (let i in value){
      // value[rei[3][i]]
      let abc = ""
      if (value[i] == null) {
          abc = ""
          continue
      }
      else {
          abc = value[i]
      }
      let th = '<th id={}>||</th>'.replace("{}", i + t.toString()).replace("||", abc)
      hbody += th
  }
  tbody += '<tr>hbody</tr>'.replace('hbody', hbody)
}
document.getElementById("tblbody").innerHTML = tbody;

自定义 循环方式，制作 table 内容格式 ；可以根据上面的 js 制作翻页功能

表格 美化

上述内容为读取表格内容 并展示的基础方法，但是 展示的 内容 会不太美观，可以写一点简单的 CSS 美化一下样式

table {
    width: 90%;
    background: #ccc;
    margin: 10px auto;
    border-collapse: collapse;
    /*border-collapse:collapse合并内外边距
    (去除表格单元格默认的2个像素内外边距*/
}
th,td {
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid #ccc;
}
th {
    background: #eee;
    font-weight: normal;
}
tr {
    background: #fff;
}
tr:hover {
    background: #cc0;
}
td a {
    color: #06f;
    text-decoration: none;
}
td a:hover {
    color: #06f;
    text-decoration: underline;
}

原始效果：

使用 CSS 样式后

这时候会发现 表头的 ok 并没有贯穿全行 这里就需要设置 ok 那个单元格的 colSpan 参数；
使用：document.getElementById("title").colSpan = 2

下载表格内容

前端处理完成表格内容，传送后端查询完成后 更新页面表格；更新的 表格内容需要下载下来，将 前端内容另存为 EXCEL 表格，代码如下：

function downLoadExcel(data, fileName) {
    //定义表头
    let str = Object.keys(data[0]).join() + '\n';
    console.log(str)
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < data.length ; i++ ){
        for(let item in data[i]){
            str+=`${data[i][item] + '\t'},`;
        }
        str+='\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //通过创建a标签实现
    let link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download = `${fileName || '表格数据'}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

data 为列表字典，JSON 数据； fileName 为文件名称
写一个按钮进行关联几个使用
以上便是此次 Flask 开发的 web前端 代码记录；

xlsx.full.min.js : 传送门