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

前端根据后端返回数据导出指定样式的表格(xlsx-js-style)

前言:使用xlsx-style一直报错,有关xlsx-js-style的文章也比较少,设置样式的时候踩过不少坑,因此整合了一下使用xlsx-js-style修改表格样式的方法,包括修改表头、列表、行高、列宽、字体、边框等等,应该是比较全面的

 最后的样式如下图所示:

 

1.下载xlsx-js-style依赖

npm install xlsx-js-style

 2.在main.js中挂载到vue原型上,方便使用

import XLSX from 'xlsx-js-style'
Vue.prototype.$xlsx = XLSX

3.代码及相关解释(有需要补充可以留言)

//html中写一个按钮绑定事件
<el-button @click=export()>导出数据</el-button>
//export()写到method里面
export(){
let Data = [["会议统计数据列表",],["时间", "转写时长", "文档数量", "会议次数", "参会人数"],]; // excel表数据 分别是第一行和第二行数据var newData = [];//定义一个数组方便拼接后面的数据//请求回来的数据this.DetailsForm格式不是数组,所以使用了map,再把数据push到我创建的数组中this.DetailsForm.map((item, index) => {newData.push([item.DateStr,item.SumTransSecond,item.SumDoc,item.SumMeeting,item.SumPerson,]);});let excelData = Data.concat(newData);//数组的拼接//this.$xlsx是挂载前面挂载到原型上的,直接使用let workbook = this.$xlsx.utils.book_new(); // 工作簿let worksheet = this.$xlsx.utils.aoa_to_sheet(excelData); // 数据表//以下是样式设置,样式设置放在组织完数据之后,xlsx-js-style的核心API就是SheetJS的//样式的设置可以参考相关文档 贴在文章末尾第二个链接//修改列宽cols 行宽就用rows 总共5列worksheet["!cols"] = [{width: 36,},{width: 36,},{width: 36,},{width: 36,},{width: 36,},];// 修改行高 这里我只修改了第一行worksheet["!rows"] = [{hpx: 50,},];//合并第一行单元格 s和e指范围即第一行 第一列到第五列worksheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } }];Object.keys(worksheet).forEach((key) => {// 非!开头的属性都是单元格// excelData.length是我表格的长度也就是总行数//设置从第三行开始的数据样式for (let i = 3; i <= excelData.length; i++) {//用正则表达式判断是否是某一行if (key.replace(/[^0-9]/gi, "") == i) {worksheet[key].s = {//设置字体font: {name: "Arial",sz: 14,bold: false,color:{ rgb: "000000" },},//设置居中alignment: {horizontal: "center",vertical: "center",wrapText: true,},    //设置边框border: {top: { style: "thin" },right: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },},};} }//设置第一行样式 第一行合并了五个单元格 因此只用设置A1if (key == "A1") {worksheet[key].s = {font: {name: "微软雅黑",sz: 22,bold: false,color: "000000",},alignment: {horizontal: "center",vertical: "center",wrapText: true,},border: {top: { style: "thin" },right: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },},};}else if ( key == "A2" ||key == "B2" ||key == "C2" ||key == "D2" ||key ==                     "E2") //设置第二行的样式{worksheet[key].s = {fill: { fgColor: { rgb: "000000" } },font: {sz: 20,name: "微软雅黑",bold: true,color: { rgb: "FFFFFF" },//最好写成这样,color: "000000"设置背景色会不生效},alignment: {horizontal: "center",vertical: "center",wrapText: true,},border: {top: { style: "thin" },right: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },},};}});this.$xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");this.$xlsx.writeFile(workbook, "会议统计表格.xlsx");//表格名称
}

4.参考文档

1.只设置了第一行和第二行的表头样式,没有写怎么拼接请求回来数据和后面的样式设置

https://blog.csdn.net/mingketao/article/details/125333066

2.很详细的样式设置说明,涉及到一些参数的使用,中文文档比较友好

https://zhuanlan.zhihu.com/p/257845606


http://www.taodudu.cc/news/show-6102280.html

相关文章:

  • 使用excelJs.js,导出excel,可以设置序列以及下拉框的联动
  • easy-excel导出excel中日期列需要双击才能进行筛选
  • ExcelJS 导入导出excel带下拉框筛选数据
  • 使用exceljs导出部门-职位联动下拉框的excel
  • 导出excel此单元格中的数字为文本格式,或者其前面有撇号
  • linux查找所有可用的摄像头
  • 树莓派安装mplayer,并使用命令查看摄像头
  • vue获取摄像头
  • 谷歌浏览器获取摄像头
  • 树莓派4b摄像头使能
  • Opencv根据USB摄像头PID\VID号,获取对应摄像头索引
  • rk3588调试之imx415摄像头
  • 推荐用于环境识别的机器人摄像头
  • python opencv 摄像头_opencv python中摄像头参数的设置
  • 树莓派CSI摄像头使用
  • leetcode 968 监控摄像头
  • 根据硬件ID查看摄像头型号方案,可查任何一款摄像头芯片来源
  • android查看摄像头信息,获取Android设备上的详细的摄像头信息
  • python获取摄像头型号_python opencv设置摄像头分辨率以及各个参数的方法_python
  • python获取摄像头型号,python3.6 opencv获取摄像头代码
  • 我的世界服务器自动被踢怎么可以进去,我的世界中国版服务器中如何解决玩家作弊的简单方法...
  • VS2019+WDK10编写xp平台的驱动
  • Windows XP中手动安装驱动程序的方法
  • xp驱动和Win7驱动的区别
  • windows XP 驱动开发环境搭建
  • 戴尔1420装XP方法和驱动
  • window XP驱动开发(一)如何下载WDK
  • Window XP驱动开发(十) 驱动程序的基本结构
  • (14)[驱动开发]配置环境 VS2019 + WDK10 写 xp驱动
  • Window XP驱动开发(二) 环境搭建(VS2008+WDK+DDKWzard)及示例源码分析