vue中导出csv格式表格

分手后的思念是犯贱 2022-11-11 06:17 590阅读 0赞

这是页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70]  
这是最终csv格式导出表

# ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 1] #

挺简单的，读完此篇文章约3分钟，学会使用约2分钟

首先介绍一下我用的插件
    
    **
    
    ## csv-exportor
    
    **
    
    安装命令
    
    npm install --save csv-exportor
    
    别忘了在script引用一下
    
    import CsvExportor from "csv-exportor";
    
    不要问为啥用这个插件，问就是用的人最多
    
    ==============================
    
    这是我在按钮上绑定的点击事件
    
      <one-button :color="true" @click="download1">导出成绩</one-button>
    
    下面让我们看一下组织的数据
    
    const data = [
      { 
        key: "20200202",
        info: "1701班",
        type: "张三",
        detail: "90",
        startTime: "1",
      },
      { 
        key: "20200203",
        info: "1701班",
        type: "李四",
        detail: "90",
        startTime: "1",
      },
      { 
        key: "20200204",
        info: "1701班",
        type: "王五",
        detail: "90",
        startTime: "1",
      },
      { 
        key: "20200205",
        info: "1701班",
        type: "李六",
        detail: "90",
        startTime: "1",
      },
      { 
        key: "20200206",
        info: "1701班",
        type: "杨七",
        detail: "90",
        startTime: "1",
      },
      { 
        key: "20200207",
        info: "1701班",
        type: "张三",
        detail: "90",
        startTime: "1",
      },
    ];
    ===============================
    
    我是先在data的外部定义的数据，const data 这个data只是随便 ，叫a,b都可以
    然后在放到data中去，我之所以定义在外部，是因为data中的数据过大，可能会导致页面加载速度变慢

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210319212005605.png]

这是方法，这个插件的最简单的地方就在与表单的表头设置，你只需要按照你需要的顺序，写进header数组就可以了， 代码如下，自取
    
    
     download1() { 
          let tableData = this.data;
          let header = ["学员", "班级", "姓名",'成绩','排名'];
          CsvExportor.downloadCsv(tableData, {  header }, "test.csv");
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70]: /images/20221022/67ea846c95f242b8981064bc305a6c13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210319212610625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021031921183735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw==,size_16,color_FFFFFF,t_70
[20210319212005605.png]: https://img-blog.csdnimg.cn/20210319212005605.png