当前位置: 首页 > news >正文

前端经验:导出表格为excel并设置样式

应用场景

将网页上的table标签内容导出为excel,并且导出的excel携带样式,比如字色、背景色、对齐等等

实施步骤

必备引入包

npm install xlsx-js-style

步骤1:准备好table

table可以是已经存在与页面中的,也可以动态创建。
行列合并的设置都提前在table内设好。

步骤2:table转excel对象

import XLSX from 'xlsx-js-style'
//这是要导出的目标table
const table_dom=$('#table')[0]
//table转excel对象
const sheet = XLSX.utils.table_to_sheet(table_dom, {raw: true,
})

步骤3:设置excel的样式

//行列索引自行想办法拿到
const colIndex=0
const rowIndex=0
//获取excel的单元格对象
const cell = sheet[`${XLSX.utils.encode_col(colIndex)}${rowIndex+ 1}`]
if(cell){cell.s = {alignment: {horizontal: 'left'//水平对齐,},font: {bold: true//是否加粗,italic: false//是否斜体,sz: 12//字体大小,color: {rgb: '66ccff'//字色,不带#号的hex字符}},fill: {bgColor: {rgb: 'ffffff'//背景色}}}
}

步骤4:导出excel

const book = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(book, sheet, "Sheet1")
XLSX.writeFile(book, `export.xlsx`)

以上。

参考资料

xlsx-js-style封装自sheetjs,sheetjs文档没有对样式设置的描述。
excel对象的操作可参考
sheetjs中文网
样式设置参考
xlsx-js-style文档

http://www.lryc.cn/news/365151.html

相关文章:

  • UFS协议—新手快速入门(二)【5-6】
  • 手机建站介绍
  • windows11 安装cnpm 报错 Error: EPERM: operation not permitted 没权限
  • SQL 如何获取A列相同但是B列不同的数据项
  • 如何在QGIS中加载高清卫星影像?
  • 后端返回图片格式乱码
  • C++基础编程100题-025 OpenJudge-1.4-05 整数大小比较
  • [office] 16种常见的COUNTIF函数公式设置 #笔记#职场发展
  • spring boot2.7.x遇到问题
  • Webpack 开发快速入门
  • AI时代的多维探索
  • 您的游戏端被攻击了怎么办,德迅云安全的应用加速来帮您
  • 关于利用hashcat破解WiFi数据包的操作记录
  • 伯克希尔·哈撒韦:“股神”的“登神长阶”
  • f1c100s 荔枝派 系统移植
  • EtherCAT 和 UDP 通讯的实时性 区别
  • 山东大学软件学院项目实训-创新实训-基于大模型的旅游平台(二十八)- 微服务(8)
  • 如何将 MySQL 数据库共享给他人?
  • netty-学习
  • 无线和移动网络
  • 快团团账号被封,大团长帮卖团长如何避免违规操作
  • Github Copilot登录账号,完美支持chat
  • Ubuntu系统中Apache Web服务器的配置与实战
  • 如何在路由器上安装代理服务:详细教程
  • JavaScript html css前端 日期对象 date对象 日期格式化 时间戳
  • 【再探】设计模式—备忘录模式与解释器模式
  • SpringCloud网关-gateway
  • LiveData是如何感知Room数据变化的
  • 【自动化】WebUI自动化通过读取用户数据的方式启动浏览器实现绕过相关登录验证的方法。
  • 信号:干扰类别及特征提取