导出excel
-
安装依赖
npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
-
下载 Export2Excel.js 文件
这个文件没在npm上找到，所以在网上找的文件放入项目中。
Export2Excel.js (复制demo中的Export2Excel.js代码保存到项目static文件夹下，可根据自己的习惯保存路径)
- 项目中使用
- 引入 export_json_to_excel 方法 (使用相对路径)
import { export_json_to_excel } from '../static/Export2Excel' - 格式化表格数据
export_json_to_excel 方法中需要用到的数据和我们在网页中渲染到table上的数据不同，需要格式化
/**
* 格式数据
* @filterVal 格式头
* @tableData 用来格式的表格数据
*/
formatJson(filterVal, tableData) {
return tableData.map(v => {
return filterVal.map(j => {
return v[j]
})
}
)
}
表格数据格式转换图.png
- 调用 export_json_to_excel 方法
// 导出按钮点击事件函数
handleExport() {
var tHeader = ['日期', '姓名', '省份', '市区', '地址', '邮编']
var filterVal = ['date', 'name', 'province','city','address','zip']
var filename = 'demoExcel'
var data = this.formatJson(filterVal, this.tableData)
export_json_to_excel({
header: tHeader,
data,
filename
})
},
导入excel
- 安装依赖
npm install -S xlsx - html
<label for="import">导入</label>
<input
type="file"
id="import"
@change="handleImport"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-excel"
/>
- js
import XLSX from "xlsx";
/**
* 导入excel的input的change 函数
* @event 事件对象
*/
handleImport(event) {
// FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
let fileReader = new FileReader();
var file = event.currentTarget.files[0];
// 回调函数
fileReader.onload = ev => {
try {
let data = ev.target.result;
let workbook = XLSX.read(data, {
type: "binary"
});
// excel读取出的数据
let excelData= XLSX.utils.sheet_to_json(
workbook.Sheets[workbook.SheetNames[0]]
);
// 将上面数据转换成 table需要的数据
let arr = [];
excelData.forEach(item => {
let obj = {};
obj.date = item["日期"];
obj.name = item["姓名"];
obj.province = item["省份"];
obj.city = item["市区"];
obj.address = item["地址"];
obj.zip = item["邮编"];
arr.push(obj);
});
this.tableData = [...arr];
} catch (e) {
window.alert("文件类型不正确！");
return false;
}
};
// 读取文件 成功后执行上面的回调函数
fileReader.readAsBinaryString(file);
}
仓库地址：https://kzone0520.coding.net/public/Export2Excel-Demo/Export2Excel-Demo/git
