vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）

前言

本篇文章记录纯前端导出下载文档功能。

若想查看从后端接收文件流，将其处理后下载的实现方式，请点击文章链接：
https://blog.csdn.net/honeymoon_/article/details/120670939

步骤：

1.下载xslx

npm install xlsx --save

2.导入xslx

import XLSX from 'xlsx'

3.template中给个点击事件

<button @click="exportData">导出</button>

4.methods中定义函数实现导出

exportData() {//定义一个数组，存放表头数据let head = [];//最后要导出的数组let tableData = [];//head格式为：['代码','时间1','时间2']this.tableHead.forEach( item => {head.push(item.name);})//把表头追加到tableData中tableData.push(head);this.tabList.forEach( item => {//表格中每有一行数据，都会创建一个rowData，追加到tableData中let rowData = [];rowData = [item.code,item.time1,item.time2,]tableData.push(rowData);})//将一个数组转成sheet，会自动处理number、string、boolean、date等类型数据；let ws = XLSX.utils.aoa_to_sheet(tableData)let wb = XLSX.utils.book_new()XLSX.utils.book_append_sheet(wb, ws, '表格')//文件名XLSX.writeFile(wb, '表格.xlsx')
},

注意：tableData是一个数组，数组的第一项为表头数据(数组)，之后的若干项为表中数据（数组）。
即：tableData[[表头数组],[表中数据数组1], [表中数据数组2],[表中数据数组3]...]

vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）相关推荐

导出自定义Excel表格（纯前端实现）
导出自定义Excel表格序: 最近做的项目涉及到了excel的导出,需要满足以下条件: 实现excel导出兼容ie11 统计数据修改宽高.合并单元格修改其它样式一.js-xlsx 介绍 xl ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
纯前端导出word、pdf、excel、txt、svg文档方法与技巧（附带问题总结）
文章目录导出pdf **实现思路:** **问题总结:** **具体代码** **封装好的导出函数,记得引入js插件** 封装方法一: 封装方法二: 封装方法三: 纯前端导出word文档方法与技巧 ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...