iview框架中文本类型的数据导出excel后以科学记数法显示的解决办法和序号导出空白问题

最新推荐文章于 2022-11-26 17:31:09 发布

leizi929

最新推荐文章于 2022-11-26 17:31:09 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web-jsp

本文链接：https://blog.youkuaiyun.com/leizi929/article/details/80899482

web-jsp 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何解决前端项目中导出Excel时出现的两个常见问题：一是导出的ID字段以科学计数法显示；二是页面上的序号在导出的Excel文件中为空。通过调整导出逻辑并使用特定属性，成功解决了这两个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考这个博文：https://blog.youkuaiyun.com/susiesun0506/article/details/78202862
项目中遇到问题：
1、导出的id是科学计数法显示的
2、页面上显示的序号，导出的excel里面是空白的

    //导出
    exportData(){
      // 增加序号，解决id科学计数法格式
      let newPage = JSON.parse(JSON.stringify(this.pageData))
      this.$refs.tables.exportCsv({
          filename: '报表分析',
          original : false,
          columns: this.shoppingColumns,
          data: newPage.map(k =>{
            k.deviceId = '="'+k.deviceId+'"'
            return k;
          })
      });

参考其他博文，可以解决id科学计数法的问题，又引发了另外一个问题就是点击导出按钮以后页面上会显示“=“id””，为了解决这个问题重新定义了一个数组，加了一个属性original。
第二个问题：页面序号ecxel里面空白问题

{
          key: "index",
          title: "序号",
          width: 100,
          align: "center"
        },

之前index的属性是type，给成key就行了
还有数据那地方修改 item.index = index + 1