实现内容:
- 导入excel文件最终将其展现在页面table中
- 将页面table中的表格转换为excel文件
仓库地址:
完整代码在这里:https://github.com/Nigo-yyy/vue-excel
依赖安装:
需要安装三个依赖包, 和两个JS包
npm包:
分别安装 file-saver、 xlsx、 script-loader三个依赖
npm install -S file-saver xlsx(这里其实安装了2个依赖)
npm install -D script-loader
JS文件
src文件夹下新建 excel文件夹,放入以下两个文件:
Blob.js
expor2Excel.js
这两个文件可以在仓库中找到
至此,我们的准备工作就做完了,开始编写代码
template部分
<div class="home">
<div class="control_wrap">
<el-upload
class="upload-demo"
action=""
:on-change="handleChange"
:on-remove="handleRemove"
:file-list="fileListUpload"
limit="1"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false"
>
<el-tooltip content="只能上传xls/xlsx 文件" placement="top-start">
<el-button style="margin-right: 20px" type="primary"
>点击上传</el-button
>
</el-tooltip>
</el-upload>
<el-button type="warning" @click="getExcel(excelData)"
>导出为excel</el-button
>
</div>
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<el-table
v-if="excelData && excelData.length"
:data="excelData"
style="width: 95%; margin: 20px auto"
border
>
<el-table-column
v-for="(item, index) of colData"
:key="index"
:label="item.label"
>
<template slot-scope="scope">
<span>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
</div>
在el-upload 的 cahnge
事件中 判断如果传入文件,且文件类型正确, 就调用我们的导入函数,将传入的文件转换为 供el-table使用的数组。
handleChange函数
handleChange(file) {
//file.raw就是我们的导入函数需要的参数
this.fileTemp = file.raw;
if (this.fileTemp) {
if (
this.fileTemp.type ==
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
this.fileTemp.type == "application/vnd.ms-excel"
) {
this.importfxx(this.fileTemp);
} else {
this.$message({
type: "warning",
message: "附件格式错误,请重新上传!",
});
this.handleRemove();
}
} else {
this.$message({
type: "warning",
message: "请上传附件!",
});
}
},
导入函数
importfxx(obj) {
// 通过DOM取文件数据
var rABS = false; //是否将文件读取为二进制字符串
var f = obj;
var reader = new FileReader();
const self = this;
FileReader.prototype.readAsBinaryString = function (f) {
var binary = "";
// var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function (e) {
console.log(e);
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var XLSX = require("xlsx");
wb = XLSX.read(binary, {
type: "binary",
});
//outdata就是需要的那个数组
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
self.excelData = [...outdata];
};
reader.readAsArrayBuffer(f);
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
到这里,我们就可以拿到table需要的数组(每一行的数组),长这个样子:
定义colData,由colData去遍历产生对应的列
colData:
export const colData = [
{
prop:'Author',
label:'作者'
},
{
prop:'Date',
label:'时间'
},
{
prop:'Id',
label:'序号'
},
{
prop:'Readings',
label:'阅读量'
},
{
prop:'Title',
label:'名称'
}
]
到这里,我们就完成了,导入excel并将其显示在table中的任务。
导出excel
expor2Excel添加代码
//由于这几个文件不支持import引入,所以我们需要`script-loader`来将他们挂载到全局环境下
require('script-loader!file-saver'); //保存文件用
require('script-loader!./Blob'); //保存二进制文件用,直接写绝对路径
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心
导出函数
getExcel(arrData) {
if (!arrData || !arrData.length) return;
const self = this;
require.ensure([], () => {
//导入expor2Excel, 写绝对路径
const { export_json_to_excel } = require("../excel/expor2Excal");
const filterVal = self.colData.map((item) => item.prop);
const tHeader = self.colData.map((item) => item.label);
const json = self.excelData;
const data = this.formatJson(filterVal, json);
// console.log(data, "data");
export_json_to_excel(tHeader, data, "excel表名");
});
},
//保持输出顺序与表头一致
formatJson(filterVal, jsonData) {
return jsonData.map( v => filterVal.map( j => v[j]));
},
好了,到此,我们的事情就做完了