vue3 导出数据为Excel表格

vue3导出数据成excel表格

效果演示:

vue3 导出数据为Excel表格_第1张图片

 

vue3 导出数据为Excel表格_第2张图片

 

首先安装插件 :npm install js-table2excel

vue3 导出数据为Excel表格_第3张图片

然后引入插件:

import table2excel from 'js-table2excel';

设置一个按钮点击事件:

 导出excel文件

设置表头:

声明一个数组,里面为excel表格的表头部分,title为表头的名称,key 为表头对应行的内容,type 为数据类型。

vue3 导出数据为Excel表格_第4张图片

导出数据:

const 声明一个数组包对象,填入对应的数据:

vue3 导出数据为Excel表格_第5张图片

 

 导出点击事件:

第一个参数:column 为表头;

第二个参数:tabledata3.value 为你填写的数据;

第三个参数:为你生成文件的名字

const export_ = () => {
  table2excel(column, tableData3.value, '兑换码');
};

你可能感兴趣的:(vue.js,npm,前端,excel)