【知识整理】vue使用js-xlsx读取excel数据
参考的文章SheetJS In-Browser Live Grid Demo如何使用JavaScript实现纯前端读取和导出excel文件JavaScript读取和导出excel示例(基于js-xlsx)[SheetJS] js-xlsx模块学习指南vue-使用js-xlsx读取excel数据(二)vue.js中使用js-xlsx读取excelSheetJS JS-XLSX In-...
·
vue.js中使用js-xlsx
引入
1.安装xlsx: npm install xlsx
2.main.js中引入:import XLSX from ‘xlsx/dist/xlsx.full.min’
3.要使用的页面引入:import XLSX from “xlsx”
代码
<template>
<div class="excel-wrap" id="excelWrap">
<!-- 上传input -->
<input type="file" accept=".xlsx, .xls" @change="changeFile" id="fileInput" />
<!-- 显示excel表格的区域 -->
<div id="result" contenteditable></div>
<!-- 显示工作表的按钮 -->
<div id="buttons"></div>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import XLSX from "xlsx";
export default {
components: {},
data() {
return {
defaultIndex: 0, // 默认显示第一个工作表
wb: null // 工作表对象
};
},
methods: {
// 文件上传
changeFile(ev) {
// console.log('file: ', ev.target.files[0]);
let f = ev.target.files[0],
reader = new FileReader();
reader.onload = e => {
let data = e.target.result;
console.log("data: ", data);
this.wb = XLSX.read(data, { type: "array" });
console.log("wb: ", this.wb);
// let wbbase64 = XLSX.read(data, { type: "base64" });
// console.log("wb: ", wbbase64);
// let wbbinary = XLSX.read(data, { type: "binary" });
// console.log("wb: ", wbbinary);
// let wbstring = XLSX.read(data, { type: "string" });
// console.log("wb: ", wbstring);
// let wbbuffer = XLSX.read(data, { type: "buffer" });
// console.log("wb: ", wbbuffer);
// this.$refs.demo.innerHTML = JSON.stringify(
// XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
// );
// let jsonData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
// console.log("jsonData: ", jsonData);
var sheetNames = this.wb.SheetNames; // 工作表名称集合
this.makeButtons(sheetNames);
var worksheet = this.wb.Sheets[sheetNames[this.defaultIndex]]; // 这里我们只读取第一张sheet
var csv = XLSX.utils.sheet_to_csv(worksheet);
console.log("csv: ", csv);
// document.getElementById("result").innerHTML = this.csv2table(csv);
var txt = XLSX.utils.sheet_to_txt(worksheet);
console.log("txt: ", txt);
var html123 = XLSX.utils.sheet_to_html(worksheet);
console.log("html123: ", html123);
var json = XLSX.utils.sheet_to_json(worksheet);
console.log("json: ", json);
document.getElementById("result").innerHTML = html123;
};
reader.readAsArrayBuffer(f);
},
// 将csv转换成简单的表格,会忽略单元格合并,在第一行和第一列追加类似excel的索引
csv2table(csv) {
var html = "<table>";
var rows = csv.split("\n");
rows.pop(); // 最后一行没用的
rows.forEach(function(row, idx) {
var columns = row.split(",");
columns.unshift(idx + 1); // 添加行索引
if (idx == 0) {
// 添加列索引
html += "<tr>";
for (var i = 0; i < columns.length; i++) {
html +=
"<th>" +
(i == 0 ? "" : String.fromCharCode(65 + i - 1)) +
"</th>";
}
html += "</tr>";
}
html += "<tr>";
columns.forEach(function(column) {
html += "<td>" + column + "</td>";
});
html += "</tr>";
});
html += "</table>";
return html;
},
// 生成下面工作表按钮,并且添加点击事件
makeButtons(sheetnames) {
var buttons = document.getElementById("buttons");
buttons.innerHTML = "";
sheetnames.forEach(function(s, idx) {
var btn = document.createElement("button");
btn.type = "button";
btn.name = "btn" + idx;
btn.text = s;
var txt = document.createElement("span");
txt.innerText = s;
btn.appendChild(txt);
const self = this;
btn.addEventListener(
"click",
function(self) {
var excelWrap = document.getElementById("excelWrap");
excelWrap.__vue__.selectSheet(idx);
},
false
);
buttons.appendChild(btn);
});
},
// 选择工作表的按钮,切换对应工作表的内容
selectSheet(num) {
this.defaultIndex = num;
console.log(this.wb);
var sheetNames = this.wb.SheetNames; // 工作表名称集合
var worksheet = this.wb.Sheets[sheetNames[this.defaultIndex]]; // 这里我们只读取第一张sheet
var csv = XLSX.utils.sheet_to_csv(worksheet);
console.log("csv: ", csv);
// document.getElementById("result").innerHTML = this.csv2table(csv);
var txt = XLSX.utils.sheet_to_txt(worksheet);
console.log("txt: ", txt);
var html123 = XLSX.utils.sheet_to_html(worksheet);
console.log("html123: ", html123);
var json = XLSX.utils.sheet_to_json(worksheet);
console.log("json: ", json);
document.getElementById("result").innerHTML = html123;
},
},
};
</script>
简单demo展示
上述代码可以实现,上传excel表格,展示excel表格中的内容,同时点击下面的sheet工作表的按钮,可以切换不同sheet里面的内容。
参考的文章
更多推荐
已为社区贡献4条内容
所有评论(0)