Vue+iview---导出Excel功能的实现

谁践踏了优雅 2022-03-06 04:26 971阅读 1赞

# 背景 #

订餐系统前端使用的是vue框架，基于iview组件，对于一些查询性的数据具有导出Excel的功能。

# 方法介绍 #

##  1.整体介绍![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70] ##

##  2.正常导出功能（没有超过12位的数字） ##

###  2.1 导出按钮添加方法 ###

###  2.2 绑定表格 ###

###  2.3 添加导出的方法 ###

exportData() {
          this.$refs.myTable.exportCsv({ 
            filename: "临时收费记录",
            original: false,
            columns: this.columns1, 
            data: this.data1
          });
    },

##  3.有超过12位的数字 ##

这个时候直接导出会出现科学计数法的形式：  
![在这里插入图片描述][20190317203951253.png]  
  所以我们需要改变导出的方法：

exportData() {
            this.$refs.myTable.exportCsv({
              filename: "历史订单",
              original: false,
              columns: this.historyColumns,
              // orderid是订单编号，此处进行转换，因为orderid过长，不转换会变成科学计数法的格式
              data: this.exportdata.map(k => {
                k.orderid = '\t' + k.orderid;
                return k;
              })
            });
    }

这样就可以正常导出了：  
![在这里插入图片描述][20190317204228794.png]

# 总结 #

所有走过的路都是最美的风景，好好总结吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220306/d15cd780290f4bfda160a7e29489b685.png
[20190317203951253.png]: /images/20220306/81658b1a4d63493ba0744b55ce075b0f.png
[20190317204228794.png]: /images/20220306/06499f37ba4947f6bc5b320ce6911a90.png