最近项目有一个需求是这样的：前端页面一个导出按钮，用户点击导出时，将页面表中的数据导出未excel格式的文件。

项目配置：

前端：Vue + element-ui + axios
后端：Node + express

项目代码：

前端页面

前端代码

	exportExcel(){
  this.$axios.post('/api/export',{}, { responseType: 'arraybuffer' })
    .then(res => {
      const link = document.createElement('a');
      const blob = new Blob([res.data],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
      link.setAttribute('href',window.URL.createObjectURL(blob));
      link.setAttribute('download','下载.xlsx');
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
}

后台代码

 let conf = {};
    // 定义sheet风格样式
    //conf.stylesXmlFile = 'styles.xml';
    // 定义sheet名称
    conf.name = 'DBData';
    // 定义列的名称以及数据类型
    conf.cols = [
        {
            caption: 'Name',
            type:'string'
        },
        {
            caption: 'Type',
            type: 'number'
        },
        {
            caption: 'cls',
            type: 'number'   
        }
    ];
    // 定义行数据，注意与列对应
    conf.rows = [
        ['wyt',22],
        ['lhc',25],
        ['curry',33],
        ['jhc',36]
    ]
    // 将编好的数据传入，生成表格数据。返回值为二进制数据
    let result = nodeExcel.execute(conf);
    // fs将文件写到内存
    fs.writeFile(`/VsCodeProject/CRM/crm-server/public/test1.xlsx`,result,'binary',(err) => {
        if(err) {
            return console.log(err)
        }
        //return res.download(`/VsCodeProject/CRM/crm-server/public/test1.xlsx`);
    });
    res.end(result,'binary')

可能出现的问题：

1.文件导出，但是却打不开，打开错误
	问题的原因可能是：后台返回的二进制文件流出了问题；
					前台接收的并非buff类型的返回值
	解决：关于前端如何接收buff类型的返回值，在请求中添加responseType: 'arraybuffer'。注意：代码里的设置responseType的方式是Post请求的设置方式，get请求是不能用这种方式的。

现在导出的数据是直接写死的，后续会继续更新，将数据替换成数据库查到的数据。