-
步骤一
npm install --save xlsx file-saver
安装依赖 -
需要导出的页面 引入依赖
import XLSX from "xlsx";
import FileSaver from "file-saver";
- 写入对应事件
导出
// 导出事件
exportExcel() {
// .table捕获excel的表格
let wb = XLSX.utils.table_to_book(document.querySelector(".table"));
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
let name = '想要导出的表格名字'
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
name + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
导入
<template>
<div>
<input type="file" ref="upload" accept=".xls, .xlsx" class="outputlist_upload" />
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data() {
return {
outputs: []
};
},
mounted() {
this.$refs.upload.addEventListener("change", e => {
//绑定监听表格导入事件
this.readExcel(e);
});
},
methods: {
readExcel(e) {
//表格导入
var that = this;
const files = e.target.files;
console.log(files);
if (files.length <= 0) {
//如果没有文件名
return false;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$Message.error("上传格式不正确,请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary"
});
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
console.log(ws,111111111);
that.outputs = []; //清空接收数据
//编辑数据
for (var i = 0; i < ws.length; i++) {
var sheetData = {
address: ws[i].addr,
value: ws[i].value
};
that.outputs.push(sheetData);
}
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
}
}
};
</script>
<style lang="stylus" scoped></style>