vue导出excel表格的新手详细教程

目录
  • 前言
  • 一、安装vue-json-excel
  • 二、main.js中引入
  • 三、在代码中使用
  • 四、数据
  • 五、效果
  • 六、一些常用参数
  • 总结

前言

在开发的时候，会经常用的导出excel表格功能,刚好自己开发有遇到，就记录一下

一、安装vue-json-excel

npm install vue-json-excel -S

二、main.js中引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

三、在代码中使用

              <template>
              <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="需要导出的表格名字.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success">导出</el-button>
              </download-excel>
              </template>

四、数据

DetailsForm：需要导出的数据

title：表格标题

json_fields：里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段

<script>
title: "xx公司表格",
 json_fields: {
        "排查日期":'date',
        "整改隐患内容":'details',
        "整改措施":'measure',
        "整改时限":'timeLimit',
        "应急措施和预案":'plan',
        "整改责任人":'personInCharge',
        "填表人":'preparer',
        "整改资金":'fund',
        "整改完成情况":'complete',
        "备注":'remark',
      },
    DetailsForm: [
        {
          date: "2022-3-10",
          details: "卸油区过路灯损坏",
          measure: "更换灯泡",
          timeLimit: "2022-3-21",
          plan: "先使用充电灯代替,贴好安全提醒告示",
          personInCharge: "王xx",
          preparer: "王xx",
          fund: "20元",
          complete: "已完成整改",
          remark: "重新更换了灯泡",
        },

      ],
</script>

五、效果

六、一些常用参数

总结

到此这篇关于vue导出excel表格的文章就介绍到这了,更多相关vue导出excel表格内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js中导出Excel表格的案例分析

    有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader 2.导入两个JS 下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 ** import Blob from '

  • vue中导出Excel表格的实现代码

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装3个依赖,file-saver.xlsx和script-loader. 使用npm安装: npm install file-saver xlsx -S npm install script-loader -D 使用yarn安装: yarn add file-saver xlsx -S yarn ad

  • Vue前端导出Excel文件的详细实现方案

    Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • Vue导出Excel功能的全过程记录

    Vue导出Excel功能的全过程记录

    目录 1.前端主导流程: 2. 插件使用及初始化 2.1  借助vue-admin中提供的方法. 2.2  安装插件依赖. 2.3  回调函数内容如下 3.对后台数据进行处理,完成想要的效果 3.1  准备一个数据处理函数(最后会在回调里面使用) 3.2  先处理表头,定义一个对象,目的是待会将表头的英文转成中文 3.3  定义表头 3.4  要处理后台返回数据 3.5   表头处理逻辑 3.6 表格data处理逻辑 3.7 函数返回 3.8 最终完成 总结: 1.前端主导流程: 1.点击页面中

  • Vue实现导出excel表格功能

    引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

  • 使用vue导出excel遇到的坑及解决

    使用vue导出excel遇到的坑及解决

    目录 vue导出excel遇到的坑 需求 准备工作 vue导出excel表报错处理 vue导出excel遇到的坑 需求 Vue+element UI el-table下的导出当前所有数据到一个excel文件里. 先按照网上的方法,看看有哪些坑 准备工作 1.安装依赖:yarn add xlsx file-saver -S 2.在放置需要导出功能的组件中引入 import FileSaver from "file-saver"; import XLSX from "xlsx&q

  • vue导出excel表格的新手详细教程

    vue导出excel表格的新手详细教程

    目录 前言 一.安装vue-json-excel 二.main.js中引入 三.在代码中使用 四.数据 五.效果 六.一些常用参数 总结 前言 在开发的时候,会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下 一.安装vue-json-excel npm install vue-json-excel -S 二.main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonEx

  • Vue请求后端接口导出excel表格方式

    Vue请求后端接口导出excel表格方式

    目录 vue请求后端接口导出excel 调用后端接口导出excel无效果,直接访问后端url可以 controller层代码 serviceImpl代码 导出模板路径 工具箱代码 vue前端写法 vue请求后端接口导出excel 项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格 后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据 如下图,请求接口返回的数据都是乱码 这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据

  • 使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解

    目录 一.导入和导出 二.导出数据为excel实现过程 三.将excel中的数据导入到数据库中 一.导入和导出 导入:通过解析excel表格中的数据,然后将数据放到一个集合中,接着通过对持久层操作,将数据插入到数据库中,再加载一下页面,从而实现了数据的导入 导出:导出也是直接对数据库进行操作,获取数据库中所有的数据,将其存储在一个集中,接着使用查询出来的的数据生成一个excel表格 其中导入和导出的功能实现都是基于EasyExcel实现的 EasyExcel是阿里巴巴开源的一个基于Java的简单

  • vue中使用vuex的超详细教程

    vue中使用vuex的超详细教程

    目录 一.适合初学者使用,保存数据以及获取数据 二.模块化(适合有部分基础的人) vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据. 那么,我们一起来看看vue项目怎么使用它吧.(如果你对vuex有一定了解,不是刚接触的小白,请忽略第一步,直接查看第二步) 一.适合初学者使用,保存数据以及获取数据 1.在sto

  • JSP 导出Excel表格的实例

    java 后台返回一个ModelAndView 对象,然后加入这2行设置 response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-disposition","attachment;filename=" + URLEncoder.encode("会员列表.xls", "UTF-8")); 也可以把这二行设

随机推荐