使用第三方插件vue-json-excel实现vue的Excel导出功能

简介: 使用第三方插件vue-json-excel实现vue的Excel导出功能

第三方插件选择——vue-json-excel

  1. 安装vue-json-excel

npm install vue-json-excel
# or
cnpm install vue-json-excel//速度更加快

2.作为组件导入vue

一般在main.js中导入注册进行全局使用

// vue-json-excel插件来实现简单Excel表格的导出功能
import JsonExcel from 'vue-json-excel'
 // 将Excel导出器作为vue实例的组件
Vue.component('downloadExcel', JsonExcel)
  1. 使用

<download-excel
            :data="voteDataList"
            :fields="json_fields"
            name="投票数据统计列表"
            class="output-excel">
            导出数据</download-excel >
//data:数据源
//name:导出Excel文件名
//fields:Excel中表头的名称

json_fields: {
        序号: 'serialId',
        标题: 'voteTitle',
        发布时间: 'publishDate'
      }

11.png

image.png


12.png

image.png



目录
相关文章
|
12天前
|
JavaScript 前端开发 数据处理
Vue导出el-table表格为Excel文件的两种方式
Vue导出el-table表格为Excel文件的两种方式
|
26天前
|
JavaScript 前端开发 API
|
26天前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
13 1
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
26天前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
190 0
|
3月前
|
存储 JavaScript
任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
这篇文章介绍了使用Vue实现的任务清单小功能,包括任务的增加、删除、修改、查看以及数据存储。文章通过视频演示展示了实现效果,重点讲解了编辑功能的实现,并通过代码实例展示了编辑功能的核心代码,同时提供了完整的代码下载链接以及以往练习的概览。
任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
|
3月前
|
前端开发 JavaScript
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
本文介绍了在Vue项目中使用`xlsx`和`xlsx-style`(或`xlsx-style-vite`)库实现导出具有自定义样式的Excel文件的方法,并提供了详细的示例代码和操作效果截图。
697 2
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
|
3月前
|
JSON C语言 数据格式
Python导出隐马尔科夫模型参数到JSON文件C语言读取
Python导出隐马尔科夫模型参数到JSON文件C语言读取
26 1
|
3月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
594 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
3月前
|
JavaScript 前端开发 easyexcel
基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程
本文展示了基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的完整过程,包括后端使用EasyExcel生成Excel文件流,前端通过Blob对象接收并触发下载的操作步骤和代码示例。
547 0
基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程