在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);
}