vue中导出csv格式表格
这是页面这是最终csv格式导出表挺简单的,读完此篇文章约3分钟,学会使用约2分钟首先介绍一下我用的插件**## csv-exportor**安装命令npm install --save csv-exportor别忘了在script引用一下import CsvExportor from "csv-exportor";不要问为啥用这个插件,问就是用的人最多=======================
·
这是页面
这是最终csv格式导出表
挺简单的,读完此篇文章约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中的数据过大,可能会导致页面加载速度变慢
这是方法,这个插件的最简单的地方就在与表单的表头设置,你只需要按照你需要的顺序,写进header数组就可以了, 代码如下,自取
download1() {
let tableData = this.data;
let header = ["学员", "班级", "姓名",'成绩','排名'];
CsvExportor.downloadCsv(tableData, { header }, "test.csv");
},
更多推荐
已为社区贡献1条内容
所有评论(0)