首先业务需求,就是在后台管理系统中可以查询当前数据表,现在要加一个功能,可以把当前查询到的数据以excel形式导出,并供管理员下载。
需求明确之后,我们就要进行功能的实现,这个需求主要内容在后端接口的编写,前端我们只需要展示一个按钮,绑定一个点击事件即可。
因为整个项目都是我自己写,所以后端我用的node
的express
框架,很简洁。
将数据以excel
形式导出,应该是有很多轮子可以用的,我使用的是node-xlsx
,之前我写微信小程序也用云开发做过类似的需求,也是用的这个插件,还挺好用的。
npm install node-xlsx
下好之后,我们在node
文件的头部引入一下。
const xlsx = require('node-xlsx');
然后我们写一下接口。
app.get('/exportExcel',async (req,res) => {
})
接口的格式大概就是这样,get
请求,名字是exportExcel
。
然后我们写接口的内容。
app.get('/exportExcel',async (req,res) => {
let data = [];
let title = ['缴费名称','缴费类型','采集发票','备注','QQ','WeChat','手机号'];
data.push(title);
let result = await PayInfo.find();
result.forEach(item => {
let arrInner = [];
arrInner.push(item.name);
arrInner.push(item.type);
arrInner.push(item.invoice);
arrInner.push(item.remarks);
arrInner.push(item.QQ);
arrInner.push(item.WeChat);
arrInner.push(item.phone);
data.push(arrInner);
});
let buffer = xlsx.build([
{
name:'sheet1',
data:data
}
]);
console.log(buffer);
res.send(buffer);
// fs.writeFileSync('./excel.xlsx',buffer,{'flag':'w'});
})
我给大家逐行解释一下。
首先声明了一个data
数组,用来存数据的。
title
数组是放excel
表头的,就是第一行的数据,这个一般都是写死的,所以咱们可以根据自己的字段,写入这个title
数组中。
let result = await PayInfo.find();
这个是我在请求mongodb
的数据,我数据库用的mongodb
,这段代码的执行结果就是,我把需要导出的数据放到了result
变量中。
接下来对这个数据的一个循环,其实就是分别把每一项的每一个字段放进数组中,然后push
到之前声明的data
数组中。
然后我们声明了一个buffer
,调用了xlsx
的build
方法,build
方法中传入的参数,name
就是这个excel
子表的名字,一般我们打开excel
的时候,左下角都会显示这个子表的名字,然后data
就是我们需要导出的数据,在上面我们通过循环已经处理好了。
这个build
方法会把excel
表转化为二进制传给buffer
变量,因为我们在进行数据传输的时候,大部分都要使用二进制,尤其是这种图片音频视频文件。
然后我们给前端返回回去即可。
这里我写的比较粗糙,没有做异常处理,大家不要向我学习,还是规范一些比较好。
接下来就是前端的内容了。
我还是直接上代码,然后逐行解释。
async excel() {
let result = await this.$http.get('http://localhost:8888/exportExcel',{
responseType: 'arraybuffer'
});
let data = result.data;
let url = window.URL.createObjectURL(new Blob([data],{
type:"application/vnd.openxmlformats-officedocment.spreadsheetml.sheet"
}))
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download','excel.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
首先我们需要使用axios
对后端接口进行请求。
然后result.data
就是后端给我们的返回值。
下面我就是对二进制文件的下载,前端处理的方法有很多,我这里用的是Blob
对象和a
标签的download
属性,这些具体的内容可以查一下MDN
文档,都比较详细。
先通过Blob
和window
对象生成了一个url
地址,然后操作DOM
,生成a标签
,加css属性
,加标签属性
,触发点击事件
,然后移除这个节点
。
基本上直接copy我这个格式就可以。
下面看一下效果:
点完按钮之后,就直接进行了excel文件的下载。
和预想的效果一摸一样。
有任何问题都可以加我联系方式交流。
QQ:505417246
微信:18331092918
微信公众号:Code程序人生