前端实现导入Excel进行数据展示、导出 - ToB企服应用市场:ToB评测及商务社交产业平台

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<span>excel导入:</span>
<input type="file" onchange="importf(this)" />
<p id="excelContent"></p>
</body>
<script src="./js/jQuery3.7.1min.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
<script src="./js/dist_jquery.table2excel.min.js"></script>
<script>
// 导入
let data = null // 总数据
var wb;//读取
var rABS = false;
//开始导入
function importf(obj) {
if (!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
/**
* wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
* wb.Sheets[Sheet名]获取第一个Sheet的数据
*/
var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
console.log(excelJson);
document.getElementById("excelContent").innerHTML = JSON.stringify(excelJson);
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
//文件流转BinaryString
function fixdata(data) {
var o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w +
w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
</script>
</html>

复制代码

<input type="file" @change="importf" />
data() {
wb: null,
rABS: false,
}
methods:{
// 导入excel
importf(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
if (this.rABS) {
this.wb = XLSX.read(btoa(fixdata(data)), {
type: 'base64'
});
} else {
this.wb = XLSX.read(data, {
type: 'binary'
});
}
const excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]]);
this.getTableData(excelJson)
};
if (this.rABS) {
reader.readAsArrayBuffer(file);
} else {
reader.readAsBinaryString(file);
}
},
//文件流转BinaryString
fixdata(data) {
let o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
}

复制代码