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
: 传送门