vue实现下载excel模板、导入excel文件、导出excel文件
1. 下载excel模板
在public目录下存放excel模板文件,我这里放的是excelTemplate.xls这个文件
html部分
// 下载模板
<el-button size="medium"
class="xxx"
@click="downloadTemplate"
>模 板el-button>
<a ref="downloadTemplate" style="display: none" href="./excelTemplate.xls">a>
js部分
methods: {
// 点击模板按钮触发a下载文件
downloadTemplate(){
this.$refs.downloadTemplate.dispatchEvent(new MouseEvent('click'))
},
}
导入excel文件
安装依赖
npm install -S xlsx
html部分
<el-button size="medium"
class="xxx"
@click="importExcel"
>导 入el-button>
<input type="file" ref="upload" accept=".xls, .xlsx" style="display: none;" />
js部分
import XLSX from "xlsx";
export default {
data () {
return {
onDutyList: [], // 保存导入的excel表格数据
orgPath: null, // 组织路径
}
}
mounted() {
//绑定监听表格导入事件
this.$refs.upload.addEventListener("change", e => {
this.readExcel(e);
});
},
methods: {
// 点击导入按钮触发input上传文件
importExcel(){
// 通过dispatchEvent触发点击事件
this.$refs.upload.dispatchEvent(new MouseEvent('click'))
},
//表格导入
readExcel(e) {
var that = this;
const files = e.target.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.onDutyList = []; //清空接收数据，把导入的excel数据转化成json格式存储到data中
//编辑数据
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 使用day.js把日期转化为时间戳
// 这里配置导入excel表的数据格式
dutyTime: this.$dayjs(ws[i]["日期"]).unix(),
dutyChief: ws[i]["test2"],
forefingerChief: ws[i]["test3"],
dutyDirector: ws[i]["test4"],
commandControlSeat: ws[i]["test5"],
warReadinessSupervisor: ws[i]["test6"],
politicalWorkSeat: ws[i]["test7"],
informationCommunicationSeat: ws[i]["test8"],
intelligenceReconnaissanceSeat: ws[i]["test9"],
backpackProtectionSeat: ws[i]["test10"],
technicalSupportSeat: ws[i]["test11"]
};
that.onDutyList.push(sheetData);
}
// 清空上传input
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
// 获取orgPath
this.getOrgPath()
},
// 通过当前用户获取组织orgPath
// 这个函数里面的代码,根据个人需求,可以不要
async getOrgPath(){
const userID = window.sessionStorage.getItem('userID')
const {data} = await get (`/api/xxx/users/${userID}/details`)
this.orgPath = data.userDetails[0].orgPath
this.orgName = data.userDetails[0].orgName
if(this.orgPath.length === 2 ){
this.orgPath = this.orgPath.substring(0,1)
}
if(this.orgPath.length > 2 ){
this.orgPath = this.orgPath.substring(2,3)
}
// 把orgPath添加到onDutyList的子项中
this.onDutyList.forEach(v => {
v.orgID = parseInt(this.orgPath)
v.orgName = this.orgName
})
// 向后端添加导入的excel数据
this.addMaryDutyData()
},
// 向后端添加导入的excel数据
async addMaryDutyData(){
const {data} = await post(`/api/on-duty-reports`, {
'onDutyList': this.onDutyList
})
if(data.errCode === 200){
this.$message.success("添加成功!")
}else{
this.$message.error("添加失败!")
}
// 更新表格数据, 这个方法是刷新表格数据的函数
this.getTableData()
},
}
}
导出excel文件
方法一:
使用file-saver+xlsx导出excel文件,但这样导出的结果是根据div中的内容导出,例如,表格中有操作这一列,导出的结果也会有操作这一列
1、安装：
npm install file-saver xlsx --save-dev
2、引入：
import FileSaver from 'file-save';
import XLSX from 'xlsx';
3、点击事件：
exportExcel() {
// 这里的outTable是需要导出的表格,选择对应id
let vb = XLSX.utils.table_to_book(document.getElementById('outTable'));
let vbout = XLSX.write(vb, {bookType: 'xlsx', bookSST: true, type: 'array'});
try {
FileSaver.saveAs(new Blob([vbout], {type: 'application/octet-stream'}), 'sheetjs.xlsx');
} catch (e) {
if (typeof console !== 'undefined') console.log(e, vbout);
}
return vbout;
}
方法二:
使用Blob.js文件+Export2Excel.js文件+xlsx插件导出excel文件,这种方式可以自定义导出字段
链接:https://pan.baidu.com/s/1NajDSjBl7FC4SagaipOtqA 密码:ryab
下载Blob.js和Export2Excel.js，在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
找到Export2Excel.js，把require(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’)
html部分
<el-button size="medium"
class="xxx"
@click="exportExcel"
>导出值班执勤表el-button>
js部分
methods: {
//表格导出
exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require("../../../../excel/Export2Excel");
const tHeader = ["日期", "test1", "test2", 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9', 'test10'];
// 上面设置Excel的表格第一行的标题
const filterVal = ["dutyTime", "dutyChief", "forefingerChief",'dutyDirector','commandControlSeat','warReadinessSupervisor','informationCommunicationSeat','politicalWorkSeat','intelligenceReconnaissanceSeat','backpackProtectionSeat','technicalSupportSeat'];
// 上面的index、nickName、name是tableData里对象的属性
// 把时间戳转化为年-月-日
// 深拷贝对象
let newTableData=JSON.parse(JSON.stringify(this.tableData));
newTableData.forEach(v => {
const formatDate = this.$dayjs.unix(v.dutyTime).format('YYYY-MM-DD')
v.dutyTime = formatDate
})
const list = newTableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, "值班执勤表");
});
// 这个方法是刷新表格数据的函数
this.getTableData()
},
// 表格导出用到的方法
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
}