Java教程

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

本文主要是介绍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请求是不能用这种方式的。
现在导出的数据是直接写死的,后续会继续更新,将数据替换成数据库查到的数据。
这篇关于Node实现一个文件导出功能(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!