在vue+node环境下实现对数据以excel形式导出并下载

首先业务需求，就是在后台管理系统中可以查询当前数据表，现在要加一个功能，可以把当前查询到的数据以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程序人生