1.表格的導(dǎo)入
代碼的實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" />
</head>
<body>
<div id="app" v-cloak>
<input type="file" @change="importExcel($event.target)" />
<div style="overflow: auto;" v-if="tableTbody&&tableTbody.length>0">
<table class="table table-bordered" style="min-width: 100%;">
<thead>
<tr>
<th>#</th>
<th v-for="(item,index) in tableHeader" :key="index">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row,index) in tableTbody" :key="index">
<th scope="row">{{index}}</th>
<td v-for="col in tableHeader">{{row[col]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.3/xlsx.full.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data() {
return {
wb: '',
tableHeader: [],
tableTbody: []
}
},
methods: {
importExcel(obj) {
if (!obj.files) {
return;
}
let file = obj.files[0],
types = file.name.split('.')[1],
fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(item => item === types);
if (!fileType) {
alert("格式錯誤侦副！請重新選擇");
return;
}
this.file2Xce(file).then(tabJson => {
if (tabJson && tabJson.length > 0) {
this.tableHeader = Object.keys(tabJson[0]);
this.tableTbody = tabJson;
}
});
},
file2Xce(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.onload = function (e) {
let data = e.target.result;
this.wb = XLSX.read(data, {
type: 'binary'
});
resolve(XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]]));
};
reader.readAsBinaryString(file);
});
}
}
})
</script>
</html>
2.表格的導(dǎo)出
這里是使用js-xlsx的table_to_book方法實(shí)現(xiàn)，還有另一種是拼接excel格式的具體請參考純前端利用 js-xlsx 實(shí)現(xiàn) Excel 文件導(dǎo)入導(dǎo)出功能示例
代碼的實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" />
</head>
<body>
<div id="app" v-cloak>
<button @click="downloadExl">導(dǎo)出</button>
<div id="tableId">
<table class="table table-bordered" style="min-width: 100%;">
<thead>
<tr>
<th>#</th>
<th v-for="(item,index) in Object.keys(jsonData[0])" :key="index">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row,index) in jsonData" :key="index">
<th scope="row">{{index}}</th>
<td v-for="col in Object.keys(jsonData[0])">{{(row)[col]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.3/xlsx.full.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data() {
return {
jsonData: [{
"訂單id": "574",
"訂單時間": "2017-06-30 13:09:59",
"下單店鋪名稱": "金湖世紀(jì)華聯(lián)(測試)",
"店鋪聯(lián)系人": "小楊",
"聯(lián)系電話": "021-33829544",
"配送地址": "浦東新區(qū)金橋鎮(zhèn)五蓮路1706號",
"一級分類": "個人洗護(hù)",
"二級分類": "洗手液/身體乳",
"商品名稱": "百雀羚護(hù)手霜 18.5g/個",
"供應(yīng)商名稱": "新增供應(yīng)商123",
"訂購數(shù)量": "6",
"商品單價": "23.00",
"商品箱規(guī)": "2.00",
"合計(jì)x箱": "3.00"
}]
}
},
methods: {
downloadExl() {
let wb = XLSX.utils.table_to_book(document.getElementById('tableId')),
wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
},
wbout = XLSX.write(wb, wopts);
saveAs(new Blob([this.s2ab(wbout)], {
type: "application/octet-stream;charset=utf-8"
}), "test.xlsx");
},
s2ab(s) {
if (typeof ArrayBuffer !== 'undefind') {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
}
})
</script>
</html>
參考資料
純前端利用 js-xlsx 實(shí)現(xiàn) Excel 文件導(dǎo)入導(dǎo)出功能示例
Vue2 導(dǎo)出excel
在 Node.js 中利用 js-xlsx 處理 Excel 文件
