vue导出数据生成Excel表格

简介: vue导出数据生成Excel表格

首先安装插件:

npm install js-table2excel

引入插件

import table2excel from 'js-table2excel';

设置表格头部:

//声明一个数组设置表头部分
const arr = [
  {
    title: 'id',  // title为表头名称
    key: 'id',    // key 为数据对应的属性名
    type: 'text'  // type 为类型
  },
  {
    title: '名称',
    key: 'name',
    type: 'text'
  },
  {
    title: '时间',
    key: 'time',
    type: 'text'
  }
]

导出数据:

//导出数据
//声明变量
const data = ref([])
//填入对应的数据
datas.value.push(
  {
    id: id, 
    name:name,
    time:time
  },
)

点击导出:

//添加按钮点击事件
<el-button type="primary"  @click="download">导出</el-button>
//导出事件
const download = ()=>{
    //第一个参数为表头 第二个参数为需要导出的数据 第三个参数为导出表格名称
  table2excel(arr.value, data.value, '兑换码');
}


目录
相关文章
|
8天前
|
文字识别 编解码 API
【发票转表格明细】PDF发票提取到表,图片发票提取到表格,扫描件发票提取到表格,全电发票PDF,全电发票扫描件识别导出EXCEL表格数电发票
本文介绍如何一键处理电子发票(PDF)和图片发票,实现自动提取信息、改名并导出Excel表格。支持区域坐标保存复用,批量识别,高效准确,告别手动录入,适合财务人员月末高效处理各类发票。
146 10
|
2月前
|
移动开发 JavaScript
(H5查看CAD)网页CAD提取图纸表格到excel
本文介绍如何通过自定义MxCAD插件,在Web端智能识别CAD图纸中的表格,实现自动合并与高效导出至Excel,提升数据提取效率与准确性。内容涵盖区域选择、图形识别、表格结构重建、单元格合并及内容导出等关键技术,适用于工程图纸数据自动化处理场景。
|
3月前
|
Python
Excel中如何批量重命名工作表与将每个工作表导出到单独Excel文件
本文介绍了如何在Excel中使用VBA批量重命名工作表、根据单元格内容修改颜色,以及将工作表导出为独立文件的方法。同时提供了Python实现导出工作表的代码示例,适用于自动化处理Excel文档。
|
3月前
|
缓存 文字识别 供应链
【发票识别】如何用手机批量识别发票信息并导出excel表格?扫描的图片发票识别、拍照的发票照片、电子发票如何快速提取明细并用发票号发票日期来改名,基于阿里云的完整的实现方案
本系统基于阿里云OCR技术,实现发票批量识别与高效管理,支持扫描、拍照及PDF电子发票等多种来源,自动提取关键信息并导出Excel,适用于企业报销、税务申报、费用审计等场景,大幅提升财务处理效率。
265 0
|
25天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
163 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
613 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
583 77
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
133 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
282 1

热门文章

最新文章