首页 > 其他分享 >xlsx-js-style前端组装表格数据下载到本地

xlsx-js-style前端组装表格数据下载到本地

时间:2024-08-22 17:28:05浏览次数:11  
标签:xlsx style const 表格 深圳市 福田区 js XLSXStyle

1.数据格式:

对象:key/value

const data1 = {
    '合同 主体信息':
        '{\n  "合同编号": "FWTsAEY-S1T-2023-01",\n  "项目编号": "FTCG2023000265A",\n  "项目名称": "福田区第二人民医院食堂服务采购项直",\n  "总计/价款": "6,200,000.00元/年",\n  "甲方(采购)单位": "深圳市福田区第二人民医院",\n  "甲方法定代表人": "赵蓉",\n  "甲方单位地址": "深圳市福田区上梅林中康路25、27号,梅林街道龙尾社区梅亭路1号4栋",\n  "乙方(供应)单位": "深圳市润浣餐饮服务管理有限公司",\n  "乙方法定代表人": "刘鹏飞",\n  "乙方单位地址": "深圳市福田区沙头街道天安社区泰然八路深业泰然大厦24C01,24C02-1",\n  "合同签订时间": "2023年8月2日"\n}',
    '中标 主体信息':
        '{\n  "项目编号": "FWCGHTCG2023000265",\n  "项目名称": "福田区第二人民医院食堂服务采购",\n  "中标金额": "0.98",\n  "甲方(采购)单位": "深圳市福田区第二人民医院",\n  "甲方单位地址": "深圳市福田区上梅林中康路27号",\n  "乙方(供应)单位": "深圳市润沅餐饮服务管理有限公司",\n  "乙方单位地址": "深圳市福田区沙头街道天安社区泰然八路深业泰然大厦24C01、24C02-1",\n  "通知书发布时间/公告期限": "2023年08月09日至2023年08月12日",\n  "合同签订事宜": null\n}',
    '合同-中标 主体信息一致性比对': '{\n  "偏离情况": "无偏离",\n  "判断依据": "中标主体信息与合同主体信息均为undefined,无法进行有效对比"\n}',
};

2. 实现效果如图(包含表格样式)

(1)纵向的表格

(2)横向的表格

3. 具体实现

  • 用到插件  "xlsx-js-style": "^1.2.0" + vue3
  • 下载:npm install xlsx-js-style
  • 引入:
import * as XLSXStyle from 'xlsx-js-style';

具体代码:

  • html:
<el-button type="primary" @click="exportToExcel(data1)">导出</el-button>
  • 源数据:
const data1 = {
    '合同 主体信息':
        '{\n  "合同编号": "FWTsAEY-S1T-2023-01",\n  "项目编号": "FTCG2023000265A",\n  "项目名称": "福田区第二人民医院食堂服务采购项直",\n  "总计/价款": "6,200,000.00元/年",\n  "甲方(采购)单位": "深圳市福田区第二人民医院",\n  "甲方法定代表人": "赵蓉",\n  "甲方单位地址": "深圳市福田区上梅林中康路25、27号,梅林街道龙尾社区梅亭路1号4栋",\n  "乙方(供应)单位": "深圳市润浣餐饮服务管理有限公司",\n  "乙方法定代表人": "刘鹏飞",\n  "乙方单位地址": "深圳市福田区沙头街道天安社区泰然八路深业泰然大厦24C01,24C02-1",\n  "合同签订时间": "2023年8月2日"\n}',
    '中标 主体信息':
        '{\n  "项目编号": "FWCGHTCG2023000265",\n  "项目名称": "福田区第二人民医院食堂服务采购",\n  "中标金额": "0.98",\n  "甲方(采购)单位": "深圳市福田区第二人民医院",\n  "甲方单位地址": "深圳市福田区上梅林中康路27号",\n  "乙方(供应)单位": "深圳市润沅餐饮服务管理有限公司",\n  "乙方单位地址": "深圳市福田区沙头街道天安社区泰然八路深业泰然大厦24C01、24C02-1",\n  "通知书发布时间/公告期限": "2023年08月09日至2023年08月12日",\n  "合同签订事宜": null\n}',
    '合同-中标 主体信息一致性比对': '{\n  "偏离情况": "无偏离",\n  "判断依据": "中标主体信息与合同主体信息均为undefined,无法进行有效对比"\n}',
};
  • 横向表格代码:
//  导出表格 --- 横向排布的
function exportToExcel2(data) {
    console.log('表格数据组装', data);
    const borderStyle = {
        top: { style: 'thin', color: { rgb: '000000' } },
        right: { style: 'thin', color: { rgb: '000000' } },
        bottom: { style: 'thin', color: { rgb: '000000' } },
        left: { style: 'thin', color: { rgb: '000000' } },
    };
    const headerStyle = {
        font: { bold: true },
        fill: { fgColor: { rgb: 'e6f4ff' } },
        alignment: { vertical: 'center', horizontal: 'center' },
        border: borderStyle,
    };
    const contentStyle = {
        font: { bold: false },
        border: borderStyle,
        alignment: { wrapText: true, vertical: 'top', horizontal: 'left' },
    };
    // 构建表格数据
    const headers = ['标题', ...Object.keys(data)];
    const contents = ['内容', ...Object.values(data)];
    const sheetData = [headers, contents];
    const worksheet = XLSXStyle.utils.aoa_to_sheet(sheetData);

    // 设置单元格样式
    // 设置标题样式
    for (let col = 0; col < headers.length; col++) {
        const cell = worksheet[XLSXStyle.utils.encode_cell({ r: 0, c: col })];
        cell.s = headerStyle;
    }

    // 设置内容样式
    for (let col = 0; col < contents.length; col++) {
        const cell = worksheet[XLSXStyle.utils.encode_cell({ r: 1, c: col })];
        cell.s = col === 0 ? headerStyle : contentStyle; // 第一列使用 headerStyle,其他列使用 contentStyle
    }
    // 设置列宽
    worksheet['!cols'] = [
        { wch: 25 }, // 第一列宽度固定为50
        ...Array(headers.length - 1).fill({ wch: 80 }), // 其他列宽度固定为200
    ];

    // 设置行高
    worksheet['!rows'] = [
        { hpx: 30 }, // 标题行高度
        { hpx: 300 }, // 内容行高度
    ];

    const workbook = XLSXStyle.utils.book_new();
    XLSXStyle.utils.book_append_sheet(workbook, worksheet, '比对结果');
    XLSXStyle.writeFile(workbook, '比对结果表格.xlsx');
    proxy.$modal.msgSuccess('比对结果已下载到本地');
}
  • 纵向表格代码:
//  导出表格 --- 纵向排布的
function exportToExcel(data) {
    const borderStyle = {
        top: { style: 'thin', color: { rgb: '000000' } },
        right: { style: 'thin', color: { rgb: '000000' } },
        bottom: { style: 'thin', color: { rgb: '000000' } },
        left: { style: 'thin', color: { rgb: '000000' } },
    };

    const headerStyle = {
        font: { bold: true },
        fill: { fgColor: { rgb: 'e6f4ff' } },
        alignment: { vertical: 'center', horizontal: 'center' },
        border: borderStyle,
    };

    const contentStyle = {
        font: { bold: false },
        border: borderStyle,
        alignment: { wrapText: true, vertical: 'top', horizontal: 'left' },
    };
    const sheetData = [
        [
            { v: '标题', s: headerStyle },
            { v: '内容', s: headerStyle },
        ],
        ...Object.entries(data).map(([key, value]) => [
            { v: key, s: headerStyle },
            { v: value, s: contentStyle },
        ]),
    ];
    const worksheet = XLSXStyle.utils.aoa_to_sheet(sheetData);
    // 设置列宽
    worksheet['!cols'] = [{ wch: 40 }, { wch: 100 }];
    // 设置行高
    worksheet['!rows'] = [
        { hpx: 40 }, // 标题行高度
    ];

    const workbook = XLSXStyle.utils.book_new();
    XLSXStyle.utils.book_append_sheet(workbook, worksheet, '比对结果');
    XLSXStyle.writeFile(workbook, '比对结果表格.xlsx');
    proxy.$modal.msgSuccess('比对结果已下载到本地');
}

标签:xlsx,style,const,表格,深圳市,福田区,js,XLSXStyle
From: https://www.cnblogs.com/shyhuahua/p/18374376

相关文章

  • 创新实践:流媒体服务器如何推动WebRTC支持H.265及JS硬软解码(MSE硬解、WASM软解)
    为了实现这一全面的解决方案,我们投入了近半年的时间进行调研与研发。我们的主要目标是:让流媒体服务器能够直接传输H.265编码的视频,而无需将其转码为H.264,从而使Chrome浏览器能够无缝解码并播放H.265视频。值得注意的是,目前市场上许多软硬件产品仍采用将H.265转码为H.264的方式来......
  • diff.js+diff2html-ui.js 使用实例
    <!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文件差异对比</title>&......
  • nextjs 客户端图片 因跨域 strict-origin-when-cross-origin 无法展示
    使用next.config.js配置跨域规则Next.js提供了一个配置文件next.config.js,你可以在其中配置images选项,以允许跨域加载图片。在Next.js中,remotePatterns配置用于定义允许加载远程图像的域名及路径。不过,remotePatterns并不支持传统的正则表达式,而是使用类似正则表达式......
  • 创新实践:流媒体服务器如何推动WebRTC支持H.265及JS硬软解码(MSE硬解、WASM软解)
    为了实现这一全面的解决方案,我们投入了近半年的时间进行调研与研发。我们的主要目标是:让流媒体服务器能够直接传输H.265编码的视频,而无需将其转码为H.264,从而使Chrome浏览器能够无缝解码并播放H.265视频。值得注意的是,目前市场上许多软硬件产品仍采用将H.265转码为H.264的......
  • Jenkins从2.401.1升级到2.440.1后项目配置报错,提示:JSONObject["scm"] is not a JSONOb
    因为安全原因升级了Jenkins。然后发现Project-->Configure那里配置竟然嵌套了,而且保存修改的时候,提示:JSONObject["scm"]isnotaJSONObject. 异常信息表明在JSON中尝试获取一个名为“scm”的属性时,期望得到的是一个JSONObject,但实际上并不是。可能是因为JSON中的......
  • 原生js实现下滑到当前模块进度条填充
    <divstyle="height:1500px;"></div><divclass="progress-container"><divclass="progress-bar"data-progress="90%"><pclass="progress-text">GoogleAds在Google搜索引擎上覆盖超过90%......
  • 基于ssm+vue.js的校园二手交易平台附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 02-HTML&JS相关练习
    1、使用html写一个网页,要求满足以下条件:(1)网页中含有任意一张图片,图片路径使用绝对路径(这里绝对路径无法识别故使用相对路径),鼠标悬停在图片时出现“马哥教育”文本,且点击图片可跳转至马哥教育官方页面(2)网页中包含账号、密码登录,且账号提前定义好是admin且不可更改,输入密码时......
  • 基于 FastAPI+Vue.js 构建的食谱管理平台
    1.2自托管的食谱管理平台:Mealie主语言:Python,Star:6.1k,周增长:400该项目是基于FastAPI+Vue.js构建的食谱管理平台。它提供了简洁友好的界面,用户可以在线编辑和管理食谱,并通过简单的操作从多种来源(URL)导入食谱内容,支持膳食计划、购物清单、多语言、API集成和Docker部署等功能......
  • Node.js获取操作系统指标和参数
    constos=require('os');console.log("操作系统临时文件夹os.tmpdir():"+os.tmpdir());console.log("CPU的字节序os.endianness():"+os.endianness());console.log("操作系统主机名os.hostname():"+os.hostname());console.log("操作......