前端开发之xlsx的使用和实例,并导出多个sheet

前端开发之xlsx的使用和实例

  • 前言
  • 效果图
  • 1、安装
  • 2、在页面中引用
  • 3、封装工具类(excel.js)
  • 4、在vue中使用

前言

在实现业务功能中导出是必不可少的功能,接下来为大家演示在导出xlsx的时候的操作

效果图

在这里插入图片描述

在这里插入图片描述

1、安装


npm install xlsx -S
npm install file-saver

2、在页面中引用

值得注意的是再引用xlsx的时候vue3和vue2写法不同
vue2:import xlsx from ‘xlsx’
vue3:import * as XLSX from ‘xlsx’

3、封装工具类(excel.js)

import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'function generateArray (table) {const out = []const rows = table.querySelectorAll('tr')const ranges = []for (let R = 0; R < rows.length; ++R) {const outRow = []const row = rows[R]const columns = row.querySelectorAll('td')for (let C = 0; C < columns.length; ++C) {const cell = columns[C]let colspan = cell.getAttribute('colspan')let rowspan = cell.getAttribute('rowspan')let cellValue = cell.innerTextif (cellValue !== '' && cellValue === +cellValue) cellValue = +cellValueranges.forEach(function (range) {if (R >= range.s.r &&R <= range.e.r &&outRow.length >= range.s.c &&outRow.length <= range.e.c) {for (let i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)}})if (rowspan || colspan) {rowspan = rowspan || 1colspan = colspan || 1ranges.push({s: {r: R,c: outRow.length},e: {r: R + rowspan - 1,c: outRow.length + colspan - 1}})}outRow.push(cellValue !== '' ? cellValue : null)if (colspan) for (let k = 0; k < colspan - 1; ++k) outRow.push(null)}out.push(outRow)}return [out, ranges]
}function datenum (v, date1904) {if (date1904) v += 1462const epoch = Date.parse(v)return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}function sheetFromArrayOfArrays (data) {const ws = {}const range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}}for (let R = 0; R !== data.length; ++R) {for (let C = 0; C !== data[R].length; ++C) {if (range.s.r > R) range.s.r = Rif (range.s.c > C) range.s.c = Cif (range.e.r < R) range.e.r = Rif (range.e.c < C) range.e.c = Cconst cell = {v: data[R][C]}if (cell.v === null) continueconst cellRef = XLSX.utils.encode_cell({c: C,r: R})if (typeof cell.v === 'number') cell.t = 'n'else if (typeof cell.v === 'boolean') cell.t = 'b'else if (cell.v instanceof Date) {cell.t = 'n'cell.z = XLSX.SSF._table[14]cell.v = datenum(cell.v)} else cell.t = 's'ws[cellRef] = cell}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)return ws
}function Workbook () {if (!(this instanceof Workbook)) return new Workbook()this.SheetNames = []this.Sheets = {}
}function s2ab (s) {const buf = new ArrayBuffer(s.length)const view = new Uint8Array(buf)for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xffreturn buf
}//导出excel的方法
export function exportTableToExcel (id) {//获取table的dom节点const theTable = document.getElementById(id)//获取table的所有数据const oo = generateArray(theTable)const ranges = oo[1]const data = oo[0]//设置导出的文件名称const wsName = 'SheetJS'//设置工作文件const wb = new Workbook()//设置sheet内容const ws = sheetFromArrayOfArrays(data)//设置多级表头ws['!merges'] = ranges//设置sheet的名称  可push多个wb.SheetNames.push(wsName)//设置sheet的内容wb.Sheets[wsName] = ws//将wb写入到xlsxconst wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: false,type: 'binary'})//通过s2absaveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}),'test.xlsx')
}
export function exportJsonToExcel ({multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'
} = {}) {//文件名称filename = filename || 'excel-list'//文件数据data = [...data]//将表头添加到数据的顶部data.unshift(header)for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i])}
//设置工作文本const wb = new Workbook()
//设置sheet名称const wsName = 'SheetJS'// 设置sheet数据const ws = sheetFromArrayOfArrays(data)const tsName = 'Sheetts'const ts = sheetFromArrayOfArrays(data)//设置多级表头if (merges.length > 0) {if (!ws['!merges']) ws['!merges'] = []merges.forEach((item) => {ws['!merges'].push(XLSX.utils.decode_range(item))})}//设置自适应行宽if (autoWidth) {const colWidth = data.map((row) =>row.map((val) => {if (val === null) {return {wch: 10}} else if (val.toString().charCodeAt(0) > 255) {return {wch: val.toString().length * 2}} else {return {wch: val.toString().length}}}))const result = colWidth[0]for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j].wch < colWidth[i][j].wch) {result[j].wch = colWidth[i][j].wch}}}ws['!cols'] = result}//将数据添加到工作文本wb.SheetNames.push(tsName)wb.Sheets[tsName] = tswb.SheetNames.push(wsName)wb.Sheets[wsName] = wsconsole.log('ws', ws)
//生成xlsx bookType生成的文件类型const wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: 'binary'})
//导出xlsxsaveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}),`${filename}.${bookType}`)
}

4、在vue中使用

<template><div class="export-excel-container"><vab-query-form><vab-query-form-left-panel :span="24"><el-form :inline="true" label-width="100px" @submit.prevent><el-form-item label="文件名"><el-input v-model="filename" placeholder="请输出要导出文件的名称" /></el-form-item><el-form-item label="文件类型"><el-select v-model="bookType"><el-option v-for="item in options" :key="item" :label="item" :value="item" /></el-select></el-form-item><el-form-item label="自动列宽"><el-radio-group v-model="autoWidth"><el-radio :label="true"></el-radio><el-radio :label="false"></el-radio></el-radio-group></el-form-item><el-form-item><el-button type="primary" @click="handleDownload">导出 Excel</el-button></el-form-item></el-form></vab-query-form-left-panel></vab-query-form><el-table v-loading="listLoading" border :data="list"><el-table-column align="center" label="序号" width="55"><template #default="{ $index }">{{ $index + 1 }}</template></el-table-column><el-table-column align="center" label="标题"><template #default="{ row }">{{ row.title }}</template></el-table-column><el-table-column align="center" label="作者"><template #default="{ row }"><el-tag>{{ row.author }}</el-tag></template></el-table-column><el-table-column align="center" label="访问量"><template #default="{ row }">{{ row.pageViews }}</template></el-table-column><el-table-column align="center" label="时间"><template #default="{ row }"><span>{{ row.datetime }}</span></template></el-table-column></el-table></div>
</template><script>
// import { getList } from '@/api/table'export default {name: 'ExportExcel',data () {return {list: [],listLoading: true,downloadLoading: false,filename: '',autoWidth: true,bookType: 'xlsx',options: ['xlsx', 'csv', 'txt']}},created () {this.fetchData()},methods: {async fetchData () {this.listLoading = true// const { data } = await getList()// const { list } = dataconst list = [{uuid: '6Ee7E1dc-d7B2-892C-f880-beDCcE9Fb0A7',id: '150000199410253945',title: 'Vncrburdy Kqnxftj',description: '反工能头书断却在政始保展通数。',status: 'deleted',author: '武敏',datetime: '2010-06-18 02:49:53',pageViews: 519,img: 'https://gitee.com/chu1204505056/image/raw/master/table/vab-image-7.jpg',switch: false,percent: 99,rate: 4,percentage: 66},{uuid: 'cb41dCdD-f6f2-fDbC-6ebA-981e2A7bcFbA',id: '350000200904177578',title: 'Nkfehdu Ywjgmgvy',description: '军族切飞公叫象热各高长则主少。',status: 'deleted',author: '康娜',datetime: '1998-09-19 04:51:45',pageViews: 1764,img: 'https://gitee.com/chu1204505056/image/raw/master/table/vab-image-18.jpg',switch: true,percent: 98,rate: 3,percentage: 28},{uuid: '12D12deF-f5Dc-0aBf-26E7-85f788fADf79',id: '320000197711238151',title: 'Usplivuxjz',description: '太型经经约率放金本属东率确据响查十。',status: 'draft',author: '蔡霞',datetime: '2000-09-10 12:48:00',pageViews: 4756,img: 'https://gitee.com/chu1204505056/image/raw/master/table/vab-image-20.jpg',switch: false,percent: 95,rate: 3,percentage: 14}]this.list = listthis.listLoading = false},handleDownload () {this.downloadLoading = trueimport('@/utils/excel').then((excel) => {const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']const filterVal = ['id', 'title', 'author', 'pageViews', 'datetime']const list = this.listconst data = this.formatJson(filterVal, list)excel.exportJsonToExcel({header: tHeader,data,filename: this.filename,autoWidth: this.autoWidth,bookType: this.bookType})this.downloadLoading = false})},formatJson (filterVal, jsonData) {return jsonData.map((v) =>filterVal.map((j) => {return v[j]}))}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Discuz!X3.4论坛网站公安备案号怎样放到网站底部?

Discuz&#xff01;网站的工信部备案号都知道在后台——全局——站点信息——网站备案信息代码填写&#xff0c;那公安备案号要添加在哪里呢&#xff1f;并没有看到公安备案号填写栏&#xff0c;今天驰网飞飞和你分享 1&#xff09;工信部备案号和公安备案号统一填写到网站备案…

数据预处理

数据预处理 引入一.配置java , hadoop , maven的window本机环境变量1.配置2.测试是否配置成功 二.创建一个Maven项目三.导入hadoop依赖四.数据清洗1.数据清洗的java代码2.查看数据清洗后的输出结果 引入 做数据预处理 需要具备的条件 : java,hadoop,maven环境以及idea软件 一…

斯坦福2024人工智能指数报告 2

《人工智能指数报告》由斯坦福大学、AI指数指导委员会及业内众多大佬Raymond Perrault、Erik Brynjolfsson 、James Manyika、Jack Clark等人员和组织合著&#xff0c;旨在追踪、整理、提炼并可视化与人工智能&#xff08;AI&#xff09;相关各类数据&#xff0c;该报告已被大多…

静态网站部署指南

一、资源准备 1.1 服务器 # 当前的服务器,公网ip:127.0.0.1 # 通过ssh协议连接访问服务器1.2 域名 目前个人拥有的域名有: 域名所有者有效期wujinet.top个人2029-04-151.3 网站代码 纯静态网站,网站源码由笔者自行开发并提供发布部署的技术支持。 二、技术栈 2.0 源码…

linux部署rustdesk

1.拉取RustDesk镜像 sudo docker image pull rustdesk/rustdesk-server2.启动hbbs服务 sudo docker run --name hbbs -p 21115:21115 -p 21116:21116 -p 21116:21116/udp -p 21118:21118 -v pwd:/root -td --nethost rustdesk/rustdesk-server hbbs3.启动hbbr服务 sudo dock…

spring boot 之 结合aop整合日志

AOP 该切面仅用于请求日志记录&#xff0c;若有其他需求&#xff0c;在此基础上扩展即可&#xff0c;不多逼逼&#xff0c;直接上代码。 引入切面依赖 <!-- 切面 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>sp…

【C++】set与map

目录 一、键值对 二、set 1. set的模板参数列表 2. set的构造 3. set的迭代器 4. set的容量 5. set的修改 6. set的查找 三、map 1. map的模板参数列表 2. map的构造 3. map的迭代器 4. map的容量 5. map的修改 6. map的查找 一、键值对 用来表示具有一一对应关…

SARscape5.7已经支持3米陆探一号(LT-1)数据处理

SARsacpe5.6.2.1版本已经开始支持LT-1的数据处理&#xff0c;由于当时只获取了12米的条带模式2&#xff08;STRIP2&#xff09;例子数据&#xff0c;对3米条带模式1&#xff08;STRIP1&#xff09;数据的InSAR处理轨道误差挺大&#xff0c;可能会造成干涉图异常。 SARsacpe5.7最…

三十篇:动脉脉搏:企业业务处理系统的生命力

动脉脉搏&#xff1a;企业业务处理系统的生命力 1. 引言 在数字经济的浪潮下&#xff0c;企业之间的竞争已不仅仅是产品和服务的竞争&#xff0c;更是信息处理能力的竞争。业务处理系统&#xff08;Transaction Processing System, TPS&#xff09;是企业信息系统架构的基础&a…

Python3 笔记:Python之禅

打开Python Shell&#xff0c;输入import this&#xff0c;按回车键运行程序。 Beautiful is better than ugly. 优雅胜于丑陋。 Explicit is better than implicit. 明确胜于含糊。 Simple is better than complex. 简单胜于复杂。

图形学初识--纹理采样和Wrap方式

文章目录 前言正文1、为什么需要纹理采样&#xff1f;2、什么是纹理采样&#xff1f;3、如何进行纹理采样&#xff1f;&#xff08;1&#xff09;假设绘制区域为矩形&#xff08;2&#xff09;假设绘制区域为三角形 4、什么是纹理的Wrap方式&#xff1f;5、有哪些纹理的Wrap方式…

洪师傅代驾系统开发 支持公众号H5小程序APP 后端Java源码

代驾流程图 业务流程图 管理端设置 1、首页装修 2、师傅奖励配置 师傅注册后,可享受后台设置的新师傅可得的额外奖励; 例:A注册了师傅,新人奖励可享受3天,第一天的第一笔订单完成后可得正常佣金佣金*奖励比例 完成第二笔/第三笔后依次可得正常佣金佣金*奖励比例 完成的第四…

牛客NC166 连续子数组的最大和(二)【中等 前缀和数组+动态规划 Java/Go/PHP/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/11662ff51a714bbd8de809a89c481e21 思路 前缀和数组动态规划Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规…

小短片创作-优化场景并输出短片(二)

1、什么是潮湿感 什么是潮湿感&#xff1a;基础颜色变化粗糙度变化表面渗入性 1.基础颜色变化&#xff1a;潮湿的地方颜色会变深 2.粗糙度变化&#xff1a;镜面粗糙度为0&#xff0c;潮湿的地方粗糙度会变低 3.表面渗入性&#xff1a;主要看材质是否防水 2、调整场景材质增…

小抄 20240526

1 一些人焦虑的原因&#xff0c;可能是他也知道自己做的事无意义&#xff0c;但是又停不下来&#xff0c;于是一直在做无用功&#xff0c;空耗精神力量。 可以试着去做一些热爱的、有价值的事情&#xff0c;焦虑就会慢慢消失。 2 人们看历史的时候&#xff0c;很容易把自己代…

士大夫v产生的

一、前言 乱码七糟 [lun qī bā zāo]&#xff0c;我时常怀疑这个成语是来形容程序猿的&#xff01; 无论承接什么样的需求&#xff0c;是不是身边总有那么几个人代码写的烂&#xff0c;但是却时常有测试小姐姐过来聊天(_求改bug_)、有产品小伙伴送吃的(_求写需求_)、有业务小…

Java 写入 influxdb

利用Python随机生成一个1000行的csv文件 import csv import random from datetime import datetime, timedelta from random import randint, choice# 定义监控对象列表和指标名称列表 monitor_objects [Server1, Server2, Server3, DB1] metric_names [CPUUsage, MemoryUsa…

网络编程 —— Http进度条

第一种下载带进度的方法 string url "https://nodejs.org/dist/v20.10.0/node-v20.10.0-x64.msi"; 1使用getASync获取服务器响应数据 参数1请求的路径&#xff0c; 参数2 HttpCompletionOption.ResponseHeadersRead 请求完成时候等待请求带什么程度才…

耐高温输送带的优势

耐高温输送带&#xff1a;工业运输的革命性升级&#xff0c;助力生产线高效稳定运行 在现代化工业生产的浪潮中&#xff0c;耐高温输送带以其独特的优势&#xff0c;正逐渐成为工业运输领域的得力助手。它不仅能够有效提升生产效率&#xff0c;更能确保生产线的安全稳定运行&a…

算法随想录第二十天打卡|654.最大二叉树 , 617.合并二叉树 ,700.二叉搜索树中的搜索 , 98.验证二叉搜索树

654.最大二叉树 又是构造二叉树&#xff0c;昨天大家刚刚做完 中序后序确定二叉树&#xff0c;今天做这个 应该会容易一些&#xff0c; 先看视频&#xff0c;好好体会一下 为什么构造二叉树都是 前序遍历 题目链接/文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;又是构…