// 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"(中等线样式)等。


Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐