vue使用xlsx-js-style导出excel表格、合并表格及设置样式

// 1 安装依赖
npm i -s xlsx-js-style

// 2 vue文件中导入包 
import XLSXST from "xlsx-js-style";

// 3 代码实现
       const workbook = XLSXST.utils.book_new();
        // 创建工作簿
        const worksheet = XLSXST.utils.json_to_sheet(this.getTableData(), { skipHeader: true });
        // 在这里添加样式代码
        for (const key in worksheet) {
          if (worksheet[key] instanceof Object) {
            worksheet[key].s = {
              alignment: {
                vertical: 'center',
                horizontal: 'center',
                indent: 0,
                wrapText: true
              },
              font: {
                name: '宋体',
                sz: 10,
                color: { rgb: '#FF000000' },
                bold: false,
                italic: false,
                underline: false
              },
              border: {
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
              }
            }
            if (key === 'A1') {
              worksheet[key].s.font.sz = 16;
            }
            if (key === 'A2') {
              worksheet[key].s.alignment.horizontal = 'left';
            }
            if (key === 'A3') {
              worksheet[key].s.alignment.horizontal = 'left';
            }
          }
        }
        // 列宽
        worksheet['!cols'] = [
          {
            wpx: 100
          },
          {
            wpx: 100
          },
          {
            wpx: 100
          },
          {
            wpx: 100
          },
          {
            wpx: 170
          },
          {
            wpx: 60
          }
        ];
        // 合并前三行   前6列 标题
        worksheet['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } },
          { s: { r: 1, c: 0 }, e: { r: 1, c: 5 } },
          { s: { r: 2, c: 0 }, e: { r: 2, c: 5 } }];
        // 合并第一列 前n行
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].spanRow > 0) {
            // +3 是因为 前三行是写死的 三行标题  +1 是因为第一行是标题头 不需要合并
            const mergeCell = { s: { r: i + 1 + 3, c: 0 }, e: { r: this.tableData[i].spanRow + i + 3, c: 0 } };
            worksheet['!merges'].push(mergeCell);
          }
        }
        // 合并第二列 前n行
        for (var j = 0; j < this.tableData.length; j++) {
          if (this.tableData[j].spanSecondRow > 0) {
            // +3 是因为 前三行是写死的 三行标题  +1 是因为第一行是标题头 不需要合并
            const mergeCell = { s: { r: j + 1 + 3, c: 1 }, e: { r: this.tableData[j].spanSecondRow + j + 3, c: 1 } };
            worksheet['!merges'].push(mergeCell);
          }
        }
        XLSXST.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
        const excelBuffer = XLSXST.write(workbook, { bookType: 'xlsx', type: 'array' });
        const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob,  '标题内容.xlsx');
        
 // 表格有多少行数据 在此处做处理
getTableData () {
      const data = [];
      // 添加三行写死内容
      const one = [ '医院环境卫生学监测结果', '', '', '', '', ''];
      // 使用 Set 过滤重复的 proName
      const uniqueProNames = new Set(this.tableData.map(item => item.proName));
      // 将 Set 转换为数组,并用逗号拼接字符串
      const joinedString = Array.from(uniqueProNames).join(',');
      const two = ['监测项目:' + joinedString, '', '', '', '', ''];
      const three = ['监测日期:' + this.$coms.getDate(this.startTime) + '~' + this.endTime, '', '', '', '', ''];
      data.push(one);
      data.push(two);
      data.push(three);
      // 添加表头
      const head = ['监测项目', '监测科室', '送检区域', '检出结果', '参考标准', '是否合格'];
      data.push(head);
      this.tableData.forEach((item) => {
        const arr = [item.proName, item.appDeptName, item.monitoringPoint, item.estimatedValue, item.standardValues, item.detectionResult];
        data.push(arr);
      });
      return data;
    },

// 样式 注释
        // alignment(对齐方式):用于控制文本在单元格内的对齐方式。

        // vertical(垂直对齐):可以是 "center"(居中对齐)、"top"(顶部对齐)或 "bottom"(底部对齐)。
        // horizontal(水平对齐):可以是 "center"(居中对齐)、"left"(左对齐)或 "right"(右对齐)。
        // indent(缩进):用于指定文本的缩进级别,以像素为单位。
        // wrapText(换行):如果设置为 true,则文本超出单元格宽度时将自动换行。
        // font(字体):用于指定字体的相关属性。

        // name(字体名称):可以是常见的字体名称,例如 '宋体'、'Arial' 等。
        // sz(字体大小):指定字体的大小,以磅为单位。
        // color(字体颜色):可以使用 RGB 值或预定义的颜色名称来设置字体颜色。
        // bold(粗体):如果设置为 true,则字体将显示为粗体。
        // italic(斜体):如果设置为 true,则字体将显示为斜体。
        // underline(下划线):如果设置为 true,则字体将显示为带有下划线。
        // border(边框):用于设置单元格的边框样式。

        // top、bottom、left、right:分别表示单元格的上、下、左、右边框样式。
        // style(样式):可以是 "thin"(细线样式)、"medium"(中等线样式)等。


要修改导出Excel 表格的字体颜色,你可以使用 xlsx-style 库提供的 `XLSXStyle` 类的 `createStyle` 方法来创建自定义样式,然后将其应用到单元格中。 下面是一个使用 Vue 3 + TypeScript 和 xlsx-style-vite 库的示例代码: ```typescript <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { utils, writeFile } from 'xlsx-style-vite'; import { XLSXStyle } from 'xlsx-style-vite/xlsx-style'; export default defineComponent({ methods: { exportExcel() { const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ]; const workbook = utils.book_new(); const worksheet = utils.aoa_to_sheet(data); // 创建自定义样式 const style = XLSXStyle.createStyle({ font: { color: '#FF0000' } }); // 将样式应用到单元格 utils.sheet_set_cell_style(worksheet, 'A1:C1', style); utils.book_append_sheet(workbook, worksheet, 'Sheet1'); writeFile(workbook, 'example.xlsx'); } } }); </script> ``` 在上面的代码中,我们首先创建了一个包含一些数据的数组 `data`。然后,我们使用 `utils.aoa_to_sheet` 方法将该数组转换为一个工作表对象。接着,我们使用 `XLSXStyle.createStyle` 方法创建了一个包含字体颜色为红色的自定义样式,并使用 `utils.sheet_set_cell_style` 方法将该样式应用到了表头行的所有单元格上。最后,我们将工作表对象添加到工作簿中,使用 `writeFile` 方法将工作簿导出为一个 Excel 文件。 需要注意的是,在使用 xlsx-style-vite 库时,要使用 `XLSXStyle` 类来创建自定义样式,这与原生的 xlsx-style 库有所不同,所以要引入 `xlsx-style-vite/xlsx-style` 模块。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值