导出
1. 步骤一 `npm install --save xlsx file-saver` 安装依赖
2. 需要导出的页面 引入依赖
import XLSX from "xlsx";
import FileSaver from "file-saver";
3. 写入对应事件
// 导出事件
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>
