一、文章引导
二、博主简介
🌏博客首页: 水香木鱼
📌专栏收录:后台管理系统
📑文章摘要:纯前端实现
vue
xlsx依赖
javascript
💌木鱼寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。
三、文章内容
程序的小伙伴们,大家好!木鱼本期为大家带来的是【纯前端实现导入表格功能】,直奔主题 👇 如下 业务代码相关注释,已标注。
请移步代码内容区域
①、安装xlsx
需要安装
0.15.6
版本的xlsx,否则会出现错误!
npm install xlsx@0.15.6
②、局部导入xlsx
import xlsx from "xlsx";
③、展示区域
<template>
<div>
<!-- 导入按钮 -->
<div class="button_group dateBoxTxt">
<a
href="javascript:;"
class="button_s my_file el-button button_s el-button--primary el-button--small"
>
<input
type="file"
class="my_input"
@change="importExcel"
id="upload"
/>导入货运系统实际运量数据
</a>
</div>
<!-- 渲染内容 -->
<el-table
:data="dataArr"
style="width: 95%; margin: 0 auto; margin-top: 5px"
max-height="100%"
border
>
<el-table-column
:prop="item.prop"
:label="item.label"
v-for="(item, i) in tableColumn"
:key="i"
>
</el-table-column>
</el-table>
</div>
</template>
④、业务区域
<script>
import xlsx from "xlsx"; //导入表格
export default {
data() {
return {
/*--上传表格配置----*/
dataArr: [], // 表格内容数据数组
tableColumn: [], // 表格表头配置数组
};
},
methods: {
// 获取表格表头
getHeader(sheet) {
const XLSX = xlsx;
const headers = [];
const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围
let C;
/* 获取单元格值 start in the first row */
const R = range.s.r; // 行 // C 列
let i = 0;
for (C = range.s.c; C <= range.e.c; ++C) {
var cell =
sheet[
XLSX.utils.encode_cell({ c: C, r: R })
]; /* 根据地址得到单元格的值find the cell in the first row */
var hdr = "UNKNOWN" + C; // 如果有空表头,会替换为您想要的默认值replace with your desired default
// XLSX.utils.format_cell 生成单元格文本值
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
if (hdr.indexOf("UNKNOWN") > -1) {
if (!i) {
hdr = "__EMPTY";
} else {
hdr = "__EMPTY_" + i;
}
i++;
}
headers.push(hdr);
}
return headers;
},
setTable(headers, excellist) {
const tableTitleData = []; // 存储表格表头数据
const tableMapTitle = {}; // 设置表格内容中英文对照用
headers.forEach((_, i) => {
tableMapTitle[_] = "prop" + i;
tableTitleData.push({
prop: "prop" + i,
label: _,
width: 100,
});
});
console.log("tableTitleData", tableTitleData);
// 映射表格内容属性名为英文
const newTableData = [];
excellist.forEach((_) => {
const newObj = {};
Object.keys(_).forEach((key) => {
newObj[tableMapTitle[key]] = _[key];
});
newTableData.push(newObj);
});
console.log("newTableData", newTableData);
this.tableColumn = tableTitleData;
this.dataArr = newTableData;
},
// 导入表格
importExcel(e) {
const files = e.target.files;
console.log(files);
if (!files.length) {
return;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
return alert("上传格式不正确,请上传xls或者xlsx格式");
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const XLSX = xlsx;
const workbook = XLSX.read(data, {
type: "binary",
});
const wsname = workbook.SheetNames[0]; //取第一张表,wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容,wb.Sheets[Sheet名]获取第一个Sheet的数据
const excellist = []; //清空接收数据
//编辑数据
for (var i = 0; i < ws.length; i++) {
excellist.push(ws[i]);
}
console.log("读取结果", excellist); // 此时得到的是一个内容是对象的数组需要处理
// 获取表头1-1
const a = workbook.Sheets[workbook.SheetNames[0]];
const headers = this.getHeader(a);
console.log("headers", headers);
// 获取表头1-2
// 渲染表格1-1
this.setTable(headers, excellist);
// 渲染表格1-2
} catch (e) {
return alert("读取失败!");
}
};
fileReader.readAsBinaryString(files[0]);
var input = document.getElementById("upload");
input.value = "";
},
},
};
</script>
⑤、按钮样式区域
<style lang="less" scoped>
// 按钮样式
.button_group {
.button_s {
width: 180px;
margin: 5px 10px 5px 5px;
}
.button_m {
width: 180px;
margin: 5px 10px 5px 5px;
}
.my_file {
position: relative;
.my_input {
position: absolute;
opacity: 0;
width: 180px;
height: 30px;
top: 0;
left: 0;
}
}
}
</style>
四、精彩推荐
💡vue时间格式处理(YYYY-MM-DD HH:mm:ss)moment.js,神器你知道吗?
💡vue后台管理做适配的最佳方案,你知道吗
💡前端引入阿里图标库的最便捷方式
💡前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
💡vue如何通过url携带token,并且打开新页面
本篇博客文章模板唯一版权归属©水香木鱼