joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::
  404 随笔 :: 39 文章 :: 8 评论 :: 20万 阅读

表格选定范围设置边框

当需要设置特定范围(如 A6 到 E19)的边框时,可以使用 XLSX.utils.decode_rangeXLSX.utils.encode_cell 方法来处理。以下是如何使用 decode_range 解析范围并设置边框样式的示例:

import XLSX from 'xlsx-js-style';

const workbook = XLSX.utils.book_new();
const worksheetData = [
  ['Name', 'Age', 'Gender'],
  ['John Doe', 29, 'Male'],
  ['Jane Smith', 32, 'Female']
];

const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

// 定义范围 A6 到 E19
const range = XLSX.utils.decode_range('A6:E19');

for (let R = range.s.r; R <= range.e.r; ++R) {
  for (let C = range.s.c; C <= range.e.c; ++C) {
    const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
    if (!worksheet[cellAddress]) {
      worksheet[cellAddress] = {};
    }
    // 设置边框样式
    worksheet[cellAddress].s = {
      border: {
        top: { style: 'thin', color: { rgb: '000000' } },
        bottom: { style: 'thin', color: { rgb: '000000' } },
        left: { style: 'thin', color: { rgb: '000000' } },
        right: { style: 'thin', color: { rgb: '000000' } }
      }
    };
  }
}

XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, 'styled_sheet.xlsx');

在这个示例中:

  • 使用 XLSX.utils.decode_range('A6:E19') 解析范围,并获取范围对象。
  • 使用范围对象 range.srange.e 来确定起始和结束的行列索引。
  • 使用嵌套的循环遍历范围内的每个单元格,并为每个单元格设置边框样式。
  • 确保边框样式的设置适合你的需求,可以根据需要调整边框的粗细、颜色等属性。

通过这种方式,你可以直接使用范围字符串来解析并设置边框样式,更加简洁和直观地处理特定范围内的单元格。

range.s

xlsx-js-style 中,range.s.r 是范围对象(Range)中的一个属性,表示范围的起始行索引(row index)。具体来说:

  • range 是通过 XLSX.utils.decode_range 方法解析得到的范围对象。
  • range.s 表示范围的起始位置,是一个包含 r(行索引)和 c(列索引)属性的对象。

例如,如果使用 XLSX.utils.decode_range('A6:E19') 解析范围字符串 'A6:E19',将得到一个范围对象,其属性如下:

  • range.s.r 表示起始行索引,对应于 A6 单元格的行索引,即 5
  • range.s.c 表示起始列索引,对应于 A6 单元格的列索引,即 0

因此,range.s.r 在上述示例中用于确定要处理的范围内的起始行。通过 range.s.rrange.e.r(结束行索引)可以确定需要设置边框样式的行范围,从而在特定范围内的每个单元格应用边框样式。

范围外围设置边框

如果你想要在一个特定范围(如 A6 到 E19)的表格中只设置最外围的边框而不设置内部区域的边框,可以通过以下方式实现:

import XLSX from 'xlsx-js-style';

const workbook = XLSX.utils.book_new();
const worksheetData = [
  ['Name', 'Age', 'Gender'],
  ['John Doe', 29, 'Male'],
  ['Jane Smith', 32, 'Female']
];

const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

// 定义范围 A6 到 E19
const range = XLSX.utils.decode_range('A6:E19');

// 设置最外围的边框
for (let R = range.s.r; R <= range.e.r; ++R) {
  for (let C = range.s.c; C <= range.e.c; ++C) {
    const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
    if (!worksheet[cellAddress]) {
      worksheet[cellAddress] = {};
    }
    if (R === range.s.r || R === range.e.r || C === range.s.c || C === range.e.c) {
      // 设置最外围的边框
      worksheet[cellAddress].s = {
        border: {
          top: { style: 'thin', color: { rgb: '000000' } },
          bottom: { style: 'thin', color: { rgb: '000000' } },
          left: { style: 'thin', color: { rgb: '000000' } },
          right: { style: 'thin', color: { rgb: '000000' } }
        }
      };
    }
  }
}

XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, 'styled_sheet.xlsx');

在这个示例中,我们依然使用 XLSX.utils.decode_range('A6:E19') 解析范围,然后使用两层循环遍历范围内的每个单元格。在设置单元格样式时,通过判断当前单元格是否位于范围的最外围(即起始行、结束行、起始列、结束列),来决定是否设置边框样式。

  • R === range.s.r:当前行为范围的起始行。
  • R === range.e.r:当前行为范围的结束行。
  • C === range.s.c:当前列为范围的起始列。
  • C === range.e.c:当前列为范围的结束列。

只有满足以上条件的单元格才会被设置最外围的边框样式,从而实现在指定范围内只设置最外围的边框而不设置内部区域的边框。

posted on   joken1310  阅读(322)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示