Node实现一个文件导出功能(一)

最近项目有一个需求是这样的:前端页面一个导出按钮,用户点击导出时,将页面表中的数据导出未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请求是不能用这种方式的。
现在导出的数据是直接写死的,后续会继续更新,将数据替换成数据库查到的数据。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值