vue2使用npm依赖包导出xlsx文件

1.下载依赖npm i xlsx

2.在根目录utils新建mergeXlxs.js

/**
 *
 */
import { utils, writeFile } from "xlsx";

export default function mergeHeader(headers, data, datamerges, defaultTitle) {
  const ws = utils.book_new();

  utils.sheet_add_aoa(ws, headers);

  //这里要给表头预留位置
  utils.sheet_add_json(ws, data, {
    origin: "A" + (headers.length + 1),
    skipHeader: true,
  });

  ws["!merges"] = datamerges;

  const wb = { Sheets: { data: ws }, SheetNames: ["data"] };

  var title = defaultTitle || "列表";
  
  const wopts = { bookType: "xlsx", bookSST: false, type: "binary" };

  return writeFile(wb, `${title}.xlsx`, wopts);
}

3.页面使用

 先导入mergeXlxs.js

import mergeHeader from "@/utils/mergeXlxs";

写在方法里 

    const rows = [];
    // s开始:x      y       e结束:x     y
    var datamerges = [
        // x轴从索引0开始到索引8合并,y轴从索引0开始到索引0结束
        { s: { c: 0, r: 0 }, e: { c: 8, r: 0 } },

        { s: { c: 0, r: 1 }, e: { c: 1, r: 1 } },
        { s: { c: 2, r: 1 }, e: { c: 8, r: 1 } },

        { s: { c: 0, r: 2 }, e: { c: 1, r: 2 } },
        { s: { c: 2, r: 2 }, e: { c: 8, r: 2 } },

        // 收货单位(需方)    供货单位(供方)
        { s: { c: 0, r: 8 }, e: { c: 3, r: 8 } },
        { s: { c: 5, r: 8 }, e: { c: 8, r: 8 } },

        { s: { c: 0, r: 9 }, e: { c: 3, r: 9 } },
        { s: { c: 5, r: 9 }, e: { c: 8, r: 9 } },

        { s: { c: 0, r: 10 }, e: { c: 3, r: 10 } },
        { s: { c: 5, r: 10 }, e: { c: 8, r: 10 } },
    ];
    let headers = [];

    //每个合并的开始位置,也就是s的c位置要有数据
    headers.push([
        "2023年11月  材料汇总表",
    ]);
    headers.push(["工程名称", "", "博望一期项目"]);
    headers.push(["供货单位", "", "广东沟泰建材贸易有限公司"]);
    headers.push(["序号", "名称", "厂家品牌", "规格型号", "供货日期", "供货单号", "单位", "数量", "备注"]);
    headers.push(["1", "钢筋", "天堂", "1kg", "2023-11-29", "DO20231128", "吨", "0", ""]);
    headers.push(["2", "钢筋", "天堂", "1kg", "2023-11-29", "DO20231128", "吨", "100", ""]);
    headers.push(["3", "钢筋", "天堂", "1kg", "2023-11-29", "DO20231128", "吨", "100", ""]);
    headers.push(["4", "合计", "", "", "", "", "", "200", ""]);
    headers.push(["收货单位(需方):", "", "", "", "", "供货单位(供方):"]);
    headers.push(["授权代表(签字):", "", "", "", "", "授权代表(签字):"]);
    headers.push(["日期:", "", "", "", "", "日期:"]);

    mergeHeader(headers, rows, datamerges, "测试合并导出");

相关推荐

  1. vue2使用npm依赖导出xlsx文件

    2023-12-07 18:08:03       40 阅读
  2. vue项目导入 .xlsx 文件

    2023-12-07 18:08:03       6 阅读
  3. Vue 导出前端数据报表为xlsx文件

    2023-12-07 18:08:03       20 阅读
  4. vue:功能【xlsx】纯前端导出Excel

    2023-12-07 18:08:03       24 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-07 18:08:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-07 18:08:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-07 18:08:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-07 18:08:03       20 阅读

热门阅读

  1. 目标检测开源数据

    2023-12-07 18:08:03       45 阅读
  2. ARMV8 - A64 - 存储器读写指令

    2023-12-07 18:08:03       31 阅读
  3. 记录一下npm包的关键字段

    2023-12-07 18:08:03       42 阅读
  4. TCP套接字编写

    2023-12-07 18:08:03       36 阅读
  5. pm2部署vue项目,Vue项目的部署在服务器

    2023-12-07 18:08:03       33 阅读
  6. StarRocks 存算分离最佳实践,让降本增效更简单

    2023-12-07 18:08:03       40 阅读
  7. STM32h7 接收各种can id情况下滤波器的配置

    2023-12-07 18:08:03       33 阅读
  8. 解决SpringBoot jar包下resources目录下文件读取不到

    2023-12-07 18:08:03       41 阅读
  9. Conda常用指令---(频率很高)

    2023-12-07 18:08:03       41 阅读
  10. 无图谱不AI之三元组数据保存Neo4j

    2023-12-07 18:08:03       29 阅读
  11. git-5

    git-5

    2023-12-07 18:08:03      31 阅读
  12. 【Appium】解决搜索输入框无搜索按钮

    2023-12-07 18:08:03       34 阅读