上传导入Excel
安装插件
npm install xlsx main.js中
// 导入excel插件
import XLSX from 'xlsx'
Vue.prototype.$XLSX = XLSX vue页面中
<div>
<el-upload
action="/上传文件的接口"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
>
<el-button size="small" type="primary" icon="el-icon-upload2">导入Excel</el-button>
</el-upload>
<br>
<el-table :data="tableData" border >
<el-table-column
prop="name"
label="姓名"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="gender"
align="center"
label="性别">
</el-table-column>
</el-table>
</div> data(){
return{
fileData:'',
tableData: []
}
},
methods:{
// ----------以下为导入Excel数据功能--------------
// 文件选择回调
onChange(file) {
this.fileData = file; // 保存当前选择文件
this.readExcel(); // 调用读取数据的方法
},
// 读取数据
readExcel() {
let that = this;
const files = that.fileData;
if (!files) {
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = this.$XLSX.read(data, {
type: "binary"
});
if (workbook.SheetNames.length >= 1) {
this.$message({
message: "导入数据表格成功",
showClose: true,
type: "success"
});
}
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = this.$XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
name: ws[i]["姓名"],
gender: ws[i]["性别"],
};
that.tableData.push(sheetData);
}
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
},
} 导出下载Excel
-
下载引入Blob.js和 Export2Excel.js
https://pan.baidu.com/share/init?surl=Qa6Quk-dJLuYSuskK_piiw 提取码：dy8m
将下载的Blob.js和 Export2Excel.js文件放在src/plugins文件夹中
- 安装插件
npm install -D script-loader
npm install -S file-saver - vue页面中
<div>
<el-button size="small" type="primary" icon="el-icon-download" @click="exportToExcel">导出Excel</el-button>
<br>
<br>
<el-table :data="tableData" border>
<el-table-column
prop="name"
label="姓名"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="gender"
align="center"
label="性别">
</el-table-column>
</el-table>
</div> data() {
return {
tableData: [{"name": "张三", "gender": "男"}, {"name": "李四", "gender": "女"}]
}
},
methods: {
exportToExcel() {
require.ensure([], () => {
const {export_json_to_excel} = require("@/plugins/Export2Excel");
// 导出后excel的表头
const tHeader = [
"姓名",
"性别"
];
// 源数据对应的属性名
const filterVal = [
"name",
"gender"
];
// 获取源数据
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, "导出后的文件名");
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
} 读取本地Excel
-
将本地的Excel拷贝到项目的public文件夹中
比如Excel文件相对于index.html文件的相对路径为 “./Excels/极度认真系统.xlsx”
- 安装插件
npm install xlsx - 安装axios
npm install axios --save-dev 在 src/main.js 中导入 axios
import axios from 'axios'
Vue.prototype.$http = - vue页面中
import XLSX from 'xlsx' created() {
// Excel文件相对于index.html文件的相对路径
let url = "./Excels/极度认真系统.xlsx"
this.$http.get(url, {responseType: 'arraybuffer'})
.then((res) => {
let data = new Uint8Array(res.data)
let wb = XLSX.read(data, {type: "array"})
// ‘2020年日记’ 为Excel文件中的表名
let content = wb.Sheets['2020年日记']
this.data = XLSX.utils.sheet_to_json(content)
})
}, 假设本地表格中的内容为：
| 姓名 | 性别 |
| 张三 | 男 |
| 李四 | 女 |
则此时 data中中的数据为
data:[
{
"姓名":'张三', "性别":'男',
},
{
"姓名":'李四', "性别":'女',
},
], json转Excel
原理与导出下载Excel相同
-
下载引入Blob.js和 Export2Excel.js
https://pan.baidu.com/share/init?surl=Qa6Quk-dJLuYSuskK_piiw 提取码：dy8m
- 安装插件
npm install -D script-loader
npm install -S file-saver - json转Excel的函数
JSONtoExcel(JSONdata) {
require.ensure([], () => {
const {export_json_to_excel} = require("@/plugins/Export2Excel");
// 将源数据转化为对象
let list = JSON.parse(JSONdata)
let keyList =[]
for (let key in list[0]) {
keyList.push(key)
}
// 导出后excel的表头
const tHeader = keyList
// 源数据对应的属性名
const filterVal = keyList
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, "导出后的文件名");
});
}, [
{"name": "张三", "gender": "男"},
{"name": "李四", "gender": "女"}
] ![Ajax——模板引擎[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)