首页 > 其他分享 >导出表格加样式

导出表格加样式

时间:2025-01-07 16:57:31浏览次数:1  
标签:const center 表格 样式 导出 key wbBlob worksheet1 data

  import FileSaver from "file-saver"; import XLSXStyle from "xlsx-style"; import XLSX from "xlsx"; export function exportExcel(data, name, merges, zishu, save = true) {   return new Promise((resolve) => {     let index = 0;     // 合并单元格 s:开始位置 e:结束位置 r:行 c:列     // const datamerges = [     //   // 实际情况根据业务需求进行     //   //{ s: { c: 0, r: 0 }, e: { c: merges, r: 0 } },     //   { s: { c: 0, r: data.length + 1 }, e: { c: 0, r: data.length + 1 } },     // ];       let ws_data = [["标题", "2", "q", "d", "c", "q", "z", "e", "r"]];     for (let i = 0; i < 10; i++) {       ws_data.push(["1", "2", "", "", "", "", "", "", "8"]);     }     var worksheet1 = XLSX.utils.aoa_to_sheet(ws_data);     //worksheet1["A1"].v = "合并值";     //worksheet1["!merges"] = datamerges;     // worksheet1.A1 = {     //   t: "s",     //   v: name,     // };     for (const key in worksheet1) {       index++;       // 前两行高度为45,其后行高为25       // 所有单元格居中       if (         key !== "!cols" &&         key !== "!merges" &&         key !== "!ref" &&         key !== "!rows" &&       ) {         worksheet1[key].s = {           font: {             // bold: true,             sz: 12,           },           alignment: {             //horizontal: "center",             vertical: "center",           },         };       }       // A1单元格加粗居中       // if (key === "A1") {       //   worksheet1[key].s = {       //     font: {       //       bold: true,       //       sz: 20,       //     },       //     alignment: {       //       horizontal: "center",       //       vertical: "center",       //     },       //   };       // }       // 表头加粗居中       // if (key.replace(/[^0-9]/gi, "") === "2") {       //   worksheet1[key].s = {       //     font: {       //       bold: true,       //     },       //     alignment: {       //       horizontal: "center",       //       vertical: "center",       //     },       //   };       // }     }     worksheet1["!cols"] = [       { wch: 10 },       { wch: 20 },       { wch: 30 },     ]; // 列宽     worksheet1["!rows"] = [{ hpx: 1 }, { hpx: 40 }]; // 行高
    const sheetNames = Object.keys({ 总表: worksheet1 });     const workbook = {       SheetNames: sheetNames, // 保存的工作表名       Sheets: { 总表: worksheet1 }, // 与表名对应的表数据     };     // // excel的配置项     const wopts = {       bookType: "xlsx", // 生成的文件类型       bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性       type: "binary",     };     // attempts to write the workbook     // const wbout = styleXLSX.write(workbook, wopts)     const wbout = XLSXStyle.write(workbook, wopts);
    try {       wbout.then((res) => {         const wbBlob = new Blob([s2ab(res)], {           type: "application/octet-stream",         });         if (save) {           saveAs(wbBlob, name + "." + "xlsx");         } else {           resolve(wbBlob);         }       });     } catch (error) {       const wbBlob = new Blob([s2ab(wbout)], {         type: "application/octet-stream",       });       if (save) {         saveAs(wbBlob, name + "." + "xlsx");       } else {         resolve(wbBlob);       }     }   }); }

标签:const,center,表格,样式,导出,key,wbBlob,worksheet1,data
From: https://www.cnblogs.com/heyz/p/18657940

相关文章

  • WXML (微信小程序模板) 代码,用于根据 item.key 的值动态添加 CSS 类名,从而实现对特定
    文章目录1、logistics-param-wrap.wxml2、logistics-param-wrap.js3、logistics-param-wrap.wxss1、logistics-param-wrap.wxml<viewclass="logistics-param-wrap"><viewclass="logistics-param-title">物流参数</view><vi......
  • 多样化消息通知样式,帮助应用提升日活跃度
    在智能手机时代,用户的通知栏充斥着各种应用推送的消息。如何在这些信息中脱颖而出,激发用户的兴趣,引导他们进一步探索,是提高应用的日活跃度(DAU)的关键。HarmonyOSSDK推送服务(Pushkit)提供了多样化的通知消息样式,开发者们可以根据应用的特点和用户的需求来定制更有创意的消息文案,吸......
  • 导入与导出Excel
    1.导入相关依赖【我们这里没有用EasyExcel】1.1):pom.xml<!--excel导入数据--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version></dependency><dependenc......
  • 前端学习openLayers配合vue3(修改地图样式)
    这一块的东西非常简单,基于上一步的继续操作关键代码,当然对应的对象需要进行相关的引入//填充颜色style:newStyle({fill:newFill({color:"rgba(255,0,0,0.5)",})})效果 完整代码<scriptsetup>i......
  • 如何隐藏Excel表格中的函数公式不让别人看到!
    大家好,我是小鱼。在使用WPS制作表格分析数据时,默认情况下输入的函数公式都是可以看到的。但是,有时不想让别人看到我们使用的函数公式,只显示结果就行,想把函数公式隐藏掉。具体操作方法:第一步、先隐藏函数公式所在单元格区域1、如下面动图所示,首先在“合计”这一列第一个单......
  • 实现Excel的导入导出(react篇)
    使用场景数据录入与编辑:在企业资源规划(ERP)、客户关系管理(CRM)等系统中,用户可通过导入Excel文件快速将大量数据录入系统,也可将系统中的数据导出为Excel进行编辑后再导入。数据分析与报表:在数据统计和分析平台中,用户可以导入包含原始数据的Excel文件,利用平台的分析功能......
  • vue2把后端响应数据保存ex表格
    在Vue中实现点击按钮将后端响应的数据导出为.xlsx文件,可以使用axios进行数据请求,并结合xlsx和file-saver库完成文件的生成和下载。以下是完整实现步骤:1.安装依赖库运行以下命令安装所需的库:npminstallxlsxfile-saveraxios2.创建导出功能组件代码示例<te......
  • 表格嵌套表单
    <template><div><el-formref="formRef":model="formData":rules="formRules"v-loading="formLoading"label-width="0px":inline-message="true&qu......
  • 说说你对css样式穿透的了解
    CSS样式穿透,也被称为深度选择器,是一种在前端开发中常用的技术,用于跨越组件或模块的边界来修改子组件内部元素的样式。这种技术在Vue.js、Angular等现代前端框架中尤其有用,因为这些框架通常会通过scoped属性来确保组件样式的局部性,以避免样式冲突。以下是我对CSS样式穿透的详细了解......
  • Markdown表格的使用
    Markdown表格的使用前言语法详解定义表格设定表格列内容的对齐方式使用场景及实例小结其他文章快来试试吧Markdown表格的使用......