吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1401|回复: 12
收起左侧

[其他原创] vueJS(XLSX)前端实现表格导出(带样式)

  [复制链接]
独怜 发表于 2024-5-16 09:36
本帖最后由 独怜 于 2024-5-16 09:46 编辑

vueJS(XLSX)前端实现表格导出(带样式)

1、安装依赖

pnpm add xlsx  xlsx-js-style -D

2、具体实现

import XLSX from "xlsx";
import xlsxStyle from 'xlsx-js-style'

exportExcel() {
      const dataMerges = [
        {
          s: {c: 0, r: 0}, e: {c: 7, r: 0}, style: {
            fill: {patternType: 'solid', fgColor: {rgb: 'd4e6fd'}},
            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'}}
            },
            font: {
              sz: 16,
              name: '宋体'
            },
            bold: true,
            alignment: {horizontal: 'center', vertical: 'center', wrapText: 1}
          }
        }, //合并第一行 第1个至第8个
        {
          s: {c: 0, r: 1}, e: {c: 7, r: 1}, style: {
            fill: {patternType: 'solid', fgColor: {rgb: 'd4e6fd'}},
            font: {
              sz: 12,
              name: '宋体'
            },
            bold: true,
            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'}}
            },
            alignment: {horizontal: 'center', vertical: 'center', wrapText: 1}
          }
        },
      ];
      // 导出表格的逻辑
      const headerData = [["日报统计", "", "", "", "", "", "", "", ""], ['起始时间:' + this.formInline.startTime + "  结束时间:" + this.formInline.endTime, "", "", "", "", "", "", "", ""], ["XXXXX", "单位部门", "XXXX", "XXXXX", "XXXXX", "项目数", "XXXXX", "XXXX"]]
      const rows = this.tableData.map(item => (Object.values({
        transportName: item.transportName,
        organName: this.formatDepartment(item.organCode),
        tranaportType: item.tranaportType,
        plateNumber: item.plateNumber,
        deviceCode: item.deviceCode,
        appNum: item.appNum,
        distanceNum: item.distanceNum,
        alarmNum: item.alarmNum
      })));
      // 构建Excel数据
      const data = [
        ...headerData,
        ...rows
      ];
      // 创建一个Workbook对象
      const workbook = XLSX.utils.book_new();
      // 将数据转换为Worksheet
      const worksheet = XLSX.utils.aoa_to_sheet(data);
      // 添加表头
      // XLSX.utils.sheet_add_aoa(worksheet, headerData);
      // 合并表头
      //worksheet["!merges"] = dataMerges;
      // 设置单元格样式
      const borderStyle = {
        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'}},
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center',
        },
        font: {
          sz: 12,
          name: '宋体'
        },
      };

      // 设置单元格边框样式
      const range = XLSX.utils.decode_range(worksheet['!ref']);
      for (let R = range.s.r; R <= range.e.r; ++R) {
        if (R < dataMerges.length) continue
        for (let C = range.s.c; C <= range.e.c; ++C) {
          const cellAddress = {c: C, r: R};
          const cellRef = XLSX.utils.encode_cell(cellAddress);
          if (!worksheet[cellRef]) continue;
          worksheet[cellRef].s = borderStyle;
          worksheet[cellRef].z = '0'; // 设置为自动调整列宽
          worksheet[cellRef].t = 's'; // 设置为字符串类型
        }
      }
      if (dataMerges.length > 0) {
        if (!worksheet['!merges']) worksheet['!merges'] = [];
        dataMerges.forEach(item => {
          // 处理合并行
          for (let i = item.s.c; i <= item.e.c; i++) {
            const cellAddress = {c: i, r: item.e.r};
            const cellRef = XLSX.utils.encode_cell(cellAddress);
            worksheet[cellRef].s = item.style || borderStyle;
            worksheet[cellRef].z = '0'; // 设置为自动调整列宽
            worksheet[cellRef].t = 's'; // 设置为字符串类型
          }
          worksheet['!merges'].push(XLSX.utils.decode_range(
            XLSX.utils.encode_cell(item.s) + ':' + XLSX.utils.encode_cell(item.e)
          ));
        });
      }
      // 设置第一行样式
      worksheet['!cols'] = [{width: 25}, {width: 25,}, {width: 15}, {width: 15}, {width: 15}, {width: 15}, {width: 15}, {width: 10}];
      worksheet['!rows'] = [{hpx: 30}, {hpx: 30}, null, null, null]; // 设置第一行高度为 30 像素
      // 将Worksheet添加到Workbook
      XLSX.utils.book_append_sheet(workbook, worksheet, 'XXXXX统计');
      // 将Workbook导出为Excel文件
      xlsxStyle.writeFile(workbook, 'XXXXX统计-' + new Date().getTime() + '.xlsx');
    },

实现效果


微信图片_20240516094500.png

免费评分

参与人数 3吾爱币 +9 热心值 +3 收起 理由
lesleyLee92 + 1 + 1 谢谢@Thanks!
苏紫方璇 + 7 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
xiaoxx313 + 1 + 1 谢谢@Thanks!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

yxnwh 发表于 2024-5-16 12:09
不错,正在做这一块的网页展示,但对展示要求不高,所以显示比较简单,刚好可以借用下lz的代码了
SZnA1 发表于 2024-5-16 10:19
Tebayaki 发表于 2024-5-16 11:12
weidechan 发表于 2024-5-16 11:12
很实用的技术分享
L__ 发表于 2024-5-16 13:32
非常实用,谢谢分享
evahappy 发表于 2024-5-18 09:44
vu3  感觉比django难
flzy110 发表于 2024-6-1 10:34
多谢分享。。。
luoxiaobo 发表于 2024-7-1 14:31
感谢分享
JieFei 发表于 2024-7-3 17:57
真是雪中送炭啊
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-1 06:51

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表