VUE纯前端导出excel表格功能《转载》

插件：使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能。

使用方法

1. 安装依赖

npm install vue-json-excel

2. 引入组件

a. 全局引入

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

b. 局部引入

import JsonExcel from "vue-json-excel";export default {name: 'name',components: {DownloadExcel: JsonExcel},data () {}
}

3. 在模版中使用

<download-excelclass="export-btn":data="tableData":fields="jsonFields"type="xls"header="患者列表"name="患者列表.xls">导出</download-excel>

参数说明

name=“患者列表”. ------------------导出Excel文件的文件名
header="列表" ------------------ 这是个excel的头部
:fields = “jsonFields” ------------------Excel中表头的名称（里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段）
:data = “tableData”. -------------------导出的数据
type="xls" -------------------导出Excel的文件类型，默认为xls

4.Excel表格表头的设置

export default{data(){return{jsonFields: {  //导出Excel表格的表头设置'序号': 'type','姓名': 'userName','年龄': 'age','手机号': 'phone','注册时间': 'createTime',},}}}

5.Excel表格中的数据

export default{data(){return{tableData:[{"userName":"张三","age":18,"gender":"phone":15612345612,"createTime":"2019-10-22"},{"userName":"李四","age":17,"gender":"phone":15612345613,"createTime":"2019-10-23"},{"userName":"王五","age":19,"gender":"phone":15612345615,"createTime":"2019-10-25"},{"userName":"赵六","age":18,"gender":"phone":15612345618,"createTime":"2019-10-15"},     ]}}
}

6. 导出Excel

注：似乎无法导出多级表头

VUE纯前端导出excel表格功能《转载》相关推荐

vue导出excel加一个进度条_vue纯前端导出excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
luckysheet 国产超强纯前端在线excel表格功能强大简单使用记录异常报错记录及处理
效果预览官网及在线示例 https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/ npm地址 https://www.npmjs.com/packa ...
vue合并表格excel导出_Vue实现导出excel表格功能
引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在s ...
vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
vue 调后台接口实现导出excel表格功能
今天遇到了一个导出excel表格的功能(如图) 实现导出分三步: 第一步:定义API接口的时候添加 responseType: "blob" // 导出策略结果downloadSt ...
前端导出Excel表格
vue + xlsx实现Excel导出简单粗暴步骤,无需花里胡哨第一步:npm install --save xlsx@0.14.3 第二步:全局封装公共方法(或者局部定义) import XLS ...
使用js-export-excel插件实现前端导出excel表格
js-export-excel 前端导出excel模板 1.下载 npm install js-export-excel 2.使用 /*** * 前端生成excel 表格(基于 js-export-e ...

VUE纯前端导出excel表格功能《转载》

使用方法

VUE纯前端导出excel表格功能《转载》相关推荐

最新文章

热门文章