xlsx xlsx-style 使用和坑记录

news2025/11/5 0:22:44

1 安装之后报错

npm install xlsx --save

npm install xlsx-style --save

Umi运行会报错

自己代码

import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";

const data = [
  [
    "demo1",
    "demo2",
    "demo3",
    "demo4",
    "demo5",
    "是否开启(填写注意: 0为否，1为是)",
  ],
  ["1", "2", "3", "4", "5", "0"],
];
const wsWidths = [20, 20, 20, 20, 20, 20];

const book = XLSX.utils.book_new(); //没有工作表的空工作簿
const workSheet = XLSX.utils.aoa_to_sheet(data);
if (Array.isArray(wsWidths) && wsWidths.length === columnNames[0].length) {
  workSheet["!cols"] = wsWidths.map((width) => ({ wch: width }));
}
if (merge) {
  /**
     *
      合并单元格：
      // s 意为 start ，即开始的单元格
      // r 是 row ，表示行号，从 0 计起
      // c 是 col ，表示列号，从 0 计起
      const merge = [
        // 纵向合并，范围是第1列的行1到行2
        { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
        // 纵向合并，范围是第2列的行1到行2
        { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
        // 横向合并，范围是第1行的列3到列5
        { s: { r: 0, c: 2 }, e: { r: 0, c: 4 } },
        // 横向合并，范围是第1行的列6到列11
        { s: { r: 0, c: 5 }, e: { r: 0, c: 10 } },
        // 横向合并，范围是第1行的列12到列17
        { s: { r: 0, c: 11 }, e: { r: 0, c: 16 } },
        // 横向合并，范围是第1行的列18到列23
        { s: { r: 0, c: 17 }, e: { r: 0, c: 22 } },
        // 横向合并，范围是第1行的列24到列29
        { s: { r: 0, c: 23 }, e: { r: 0, c: 28 } },
        // 横向合并，范围是第1行的列30到列35
        { s: { r: 0, c: 29 }, e: { r: 0, c: 34 } }
      ];
    */
  workSheet["!merges"] = merge;
}
const colKeys = Object.keys(workSheet).filter((k) => /[A-Z]/.test(k[0]));
styles.forEach((s, i) => {
  const t = columnNames[0][i];
  const j = colKeys.findIndex((k) => workSheet[k].v === t);
  if (s && j > -1) {
    workSheet[colKeys[j]].s = s;
  }
});
XLSX.utils.book_append_sheet(book, workSheet, sheetName);
XLSXStyle.writeFile(book, filename, {
  defaultCellStyle /* {
      font: { name: "Verdana", sz: 14, color: {rgb: "FFFF0000"}},
      fill: {fgColor: {rgb: "FF00FF00"}},
      alignment: {vertical: 'center'}
    } */,
});

解决方案1：配置webpack

externals: {
     './cptable': 'var cptable',
},

Umi在config.ts中配置。

解决方案2:删除两个导入 （最佳方案）

import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";

删除之后，上面的代码就能正常使用，编译也不报错了，也不需要进行webpack配置。

因为这两个库不支持ES 6的导出，导出的值是undefined。

解决方案3

使用方案1生成表格时候报错：

意思就是

XLSX为undefined，我去这不是import导入进来了吗，怎么就undefined了。

直接进入XLSX源码查看。

源码里面根本就没有导出XLSX。直接挂在window上面的，什么玩意啊。

修改自己的代码

const data = [
  [
    "demo1",
    "demo2",
    "demo3",
    "demo4",
    "demo5",
    "是否开启(填写注意: 0为否，1为是)",
  ],
  ["1", "2", "3", "4", "5", "0"],
];
const wsWidths = [20, 20, 20, 20, 20, 20];

const book = window.XLSX.utils.book_new(); //没有工作表的空工作簿
const workSheet = window.XLSX.utils.aoa_to_sheet(data);
if (Array.isArray(wsWidths) && wsWidths.length === columnNames[0].length) {
  workSheet["!cols"] = wsWidths.map((width) => ({ wch: width }));
}
if (merge) {
  /**
     *
      合并单元格：
      // s 意为 start ，即开始的单元格
      // r 是 row ，表示行号，从 0 计起
      // c 是 col ，表示列号，从 0 计起
      const merge = [
        // 纵向合并，范围是第1列的行1到行2
        { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
        // 纵向合并，范围是第2列的行1到行2
        { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
        // 横向合并，范围是第1行的列3到列5
        { s: { r: 0, c: 2 }, e: { r: 0, c: 4 } },
        // 横向合并，范围是第1行的列6到列11
        { s: { r: 0, c: 5 }, e: { r: 0, c: 10 } },
        // 横向合并，范围是第1行的列12到列17
        { s: { r: 0, c: 11 }, e: { r: 0, c: 16 } },
        // 横向合并，范围是第1行的列18到列23
        { s: { r: 0, c: 17 }, e: { r: 0, c: 22 } },
        // 横向合并，范围是第1行的列24到列29
        { s: { r: 0, c: 23 }, e: { r: 0, c: 28 } },
        // 横向合并，范围是第1行的列30到列35
        { s: { r: 0, c: 29 }, e: { r: 0, c: 34 } }
      ];
    */
  workSheet["!merges"] = merge;
}
const colKeys = Object.keys(workSheet).filter((k) => /[A-Z]/.test(k[0]));
styles.forEach((s, i) => {
  const t = columnNames[0][i];
  const j = colKeys.findIndex((k) => workSheet[k].v === t);
  if (s && j > -1) {
    workSheet[colKeys[j]].s = s;
  }
});
 window.XLSX.utils.book_append_sheet(book, workSheet, sheetName);
 window.XLSXStyle.writeFile(book, filename, {
   defaultCellStyle /* {
      font: { name: "Verdana", sz: 14, color: {rgb: "FFFF0000"}},
      fill: {fgColor: {rgb: "FF00FF00"}},
      alignment: {vertical: 'center'}
    } */,
 });

直接使用window点对应的方法。

生成文件内容

2 文件解析


import { Upload } from "antd";
<Upload
  accept=".xlsx"
  fileList={[]}
  beforeUpload={(file) => onBeforeUpload(file)}
>
  <Button>批量上传</Button>
</Upload>;

const isBinary =
  typeof FileReader !== "undefined" &&
  typeof FileReader.prototype !== "undefined" &&
  typeof FileReader.prototype.readAsBinaryString !== "undefined";

let myParseWorker;

function formatData(data) {
  var o = "",
    l = 0,
    w = 10240;
  for (; l < data.byteLength / w; ++l)
    o += String.fromCharCode.apply(
      null,
      new Uint8Array(data.slice(l * w, l * w + w))
    );
  o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
  return o;
}
function parseWorker(data) {
  if (!myParseWorker) {
    myParseWorker = new Worker(
      `${
        window.location.protocol +
        "//" +
        window.location.host +
        window.location.pathname
      }xlsx.worker.js`
    );
  }
  return new Promise((resolve, reject) => {
    myParseWorker.onmessage = function (e) {
      switch (e.data.type) {
        case "error":
          reject(e.data.data);
          break;
        case "xlsx":
          return resolve(JSON.parse(e.data.data));
      }
    };
    data = isBinary ? data : btoa(formatData(data));
    myParseWorker.postMessage({ data, binary: isBinary });
  });
}

const onBeforeUpload = async (file) => {
  try {
    const res = new Promise((resolve, reject) => {
      const myFileReader = new FileReader();
      myFileReader.onload = (e) => {
        try {
          parseWorker(e.target.result)
            .then((res) => {
              //if里面可以增加自己的校验方法
              if (true) {
                return resolve(file);
              }
              return reject(e);
            })
            .catch((error) => {
              console.log(error);
              reject(error);
            });
        } catch (error) {
          console.log(error);
          reject(error);
        }
      };
      if (isBinary) {
        myFileReader.readAsBinaryString(file);
      } else {
        myFileReader.readAsArrayBuffer(file);
      }
    });
    return file;
  } catch (error) {
    console.log(error);
  } finally {
  }
};

parseWorker里面then中res

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1431372.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

电路设计（9）——八路智力抢答器的proteus仿真

电路设计（9）——八路智力抢答器的proteus仿真

1.设计要求 运用模拟电路、数字电路知识&#xff0c;设计、制作一个8路智力竞赛抢答器&#xff0c;要求有优先锁存、数显、声响及复位电路。 主要元器件&#xff1a;CD4511&#xff0c;IN4148&#xff0c;共阴数码管&#xff0c;NPN三极管9013&#xff0c;NE555&#xff0c;喇叭…
阅读更多...
在工业制造方面，如何更好地实现数字化转型？

在工业制造方面，如何更好地实现数字化转型？

实现工业制造的数字化转型涉及利用数字技术来增强流程、提高效率并推动创新。以下是工业制造领域更好实现数字化转型的几个关键步骤&#xff1a; 1.定义明确的目标&#xff1a; 清楚地概述您的数字化转型目标。确定需要改进的领域&#xff0c;例如运营效率、产品质量或供应链…
阅读更多...
[SWPUCTF 2021 新生赛]Do_you_know_http

[SWPUCTF 2021 新生赛]Do_you_know_http

我们看到它让我们用WLLM浏览器登录 那我们修改User-Agent的值即可 发现有一个a.php的我们进入该目录 它提示我们不在本地服务器上 发现有一个/secretttt.php的目录 我进入即可获得flag
阅读更多...
Netflix Mac(奈飞mac客户端) v2.13.0激活版

Netflix Mac(奈飞mac客户端) v2.13.0激活版

Clicker for Netflix Mac版是一款适用于Mac的最佳独立Netflix播放器&#xff0c;具有直接从从Dock启动Netflix&#xff0c;从触摸栏控制Netflix&#xff0c;支持画中画等多种功能&#xff0c;让你拥有更好的观看体验。 软件特色 •直接从Dock启动Netflix •从触摸栏控制Netflix…
阅读更多...
何以穿越产业周期？解读蓝思科技2023年增长密码

何以穿越产业周期？解读蓝思科技2023年增长密码

1月30日晚&#xff0c;蓝思科技发布了2023年业绩预告&#xff0c;2023年预计实现归母净利润29.38亿元-30.60亿元&#xff0c;同比增长20%-25%。 松果财经注意到&#xff0c;蓝思科技通过垂直整合&#xff0c;构筑了更具竞争力的产业链条。一方面&#xff0c;公司打造了包含ODM…
阅读更多...
[349. 两个数组的交集]（C语言）（两种解法：双指针+排序，哈希）

[349. 两个数组的交集]（C语言）（两种解法：双指针+排序，哈希）

✨欢迎来到脑子不好的小菜鸟的文章✨ &#x1f388;创作不易&#xff0c;麻烦点点赞哦&#x1f388; 所属专栏&#xff1a;刷题 我的主页&#xff1a;脑子不好的小菜鸟 文章特点&#xff1a;关键点和步骤讲解放在 代码相应位置 前提&#xff1a; 看本文章之前&#xff0c;建…
阅读更多...
php微信退款:订单金额或退款金额与之前请求不一致，请核实后再试问题

php微信退款:订单金额或退款金额与之前请求不一致，请核实后再试问题

bug出现情况&#xff1a; 微信支付退款 解决方案 php将float转换成int类型&#xff0c;在要转换的变量之前加上用括号括起来的目标类型 <?php $a 16.90; echo (int)($a * 100); echo "<br/>"; echo (int)strval($a * 100);
阅读更多...
2024年土木工程与环境科学国际会议(ICCEES2024)

2024年土木工程与环境科学国际会议(ICCEES2024)

2024年土木工程与环境科学国际会议(ICCEES2024) 会议简介 土木工程与环境科学是国民经济中的基础性、先导性、战略性产业&#xff0c;本次会议主要围绕土木工程与环保科学等研究领域&#xff0c;旨在吸引土木工程与生态环境工程专家学者、科技人员、&#xff0c;为广大工程师…
阅读更多...
SSL证书的验证过程

SSL证书的验证过程

HTTPS是工作于SSL层之上的HTTP协议&#xff0c;SSL&#xff08;安全套接层&#xff09;工作于TCP层之上&#xff0c;向应用层提供了两个基本安全服务&#xff1a;认证和保密。SSL有三个子协议&#xff1a;握手协议&#xff0c;记录协议和警报协议。其中握手协议实现服务器与客户…
阅读更多...
嵌入式学习第十六天！（Linux文件查看、查找命令、标准IO）

嵌入式学习第十六天！（Linux文件查看、查找命令、标准IO）

Linux软件编程 1. Linux&#xff1a; 操作系统的内核&#xff1a; 1. 管理CPU 2. 管理内存 3. 管理硬件设备 4. 管理文件系统 5. 任务调度 2. Shell&#xff1a; 1. 保护Linux内核&#xff08;用户和Linux内核不直接操作&#xff0c;通过操作Shell&#xff0c;Shell和内核交互…
阅读更多...
AES加密原理

AES加密原理

AES是一个迭代的、分组密码加密方式&#xff0c;可以使用128 、192和256位密钥。与 公共密钥密码使用密钥对不同&#xff0c;对称密钥密码使用相同的密钥加密和解密数据。 通过分组密码返回的加密数据的位数与输入数据相同。迭代加密使用一个循环结 构&#xff0c;在该循环中重…
阅读更多...
小程序中封装下拉选择框

小程序中封装下拉选择框

小程序中没有现成的下拉选择组件&#xff0c;有个picker组件&#xff0c;但是是底部弹出的&#xff0c;不满足我的需求&#xff0c;所以重新封装了一个。 封装的下拉组件 html部分&#xff1a; <view class"select_all_view"><!-- 内容说明&#xff0c;可…
阅读更多...
ref和reactive, toRefs的使用

ref和reactive, toRefs的使用

看尤雨溪说&#xff1a;为什么Vue3 中应该使用 Ref 而不是 Reactive&#xff1f; toRefs import { ref, toRefs } from vue;// 定义一个响应式对象 const state ref({count: 0,name: Vue });// 使用toRefs转换为响应式引用对象 const reactiveState toRefs(state);// 现在你…
阅读更多...
vue3 之 组合式API—reactive和ref函数

vue3 之 组合式API—reactive和ref函数

ref&#xff08;&#xff09; 作用&#xff1a;接收简单类型或者对象类型的数据传入并返回一个响应式的对象 核心步骤&#xff1a; 1️⃣ 从 vue 包中导入 ref 函数 2️⃣在 <script setup>// 导入import { ref } from vue// 执行函数 传入参数 变量接收const count …
阅读更多...
2024亿级密码泄露事件：涉及7084万个邮箱账号

2024亿级密码泄露事件：涉及7084万个邮箱账号

近日&#xff0c;热门漏洞通知服务HIBP所有者特洛伊・亨特&#xff08;Troy Hunt&#xff09;发布博文&#xff0c;表示在暗网上发现了超大规模的泄漏数据集&#xff0c;被称为Naz.API列表。该数据集包含7084万个电子邮件地址以及超过1亿个密码凭证&#xff0c;至少有超过40万 …
阅读更多...
【AG32VF407】国产MCU+FPGA Verilog双边沿检测输出方波

【AG32VF407】国产MCU+FPGA Verilog双边沿检测输出方波

视频讲解 [AG32VF407]国产MCUFPGA Verilog双边沿检测输出方波 实验过程 本次使用使用AG32VF407开发板中的FPGA&#xff0c;使用双clk的双边沿进行检测&#xff0c;同步输出方波 同时可以根据输出的方波检测clk的频率&#xff0c;以及双clk的相位关系&#xff0c;如下为verilog…
阅读更多...
Google play全球桌面棋牌游戏下载量周排行榜（2024.01.22—01.28）

Google play全球桌面棋牌游戏下载量周排行榜（2024.01.22—01.28）

今天酷鸟远程整理了Google paly桌面棋牌类游戏在美国、香港、巴西地区下载量排行榜前20名情况。 作为谷歌开发者的你&#xff0c;快来看看有没有你关心的游戏应用吧。 如果还想看更多或其它国家和地区的应用&#xff0c;或其它类别应用的相关具体数据&#xff0c;例如&#x…
阅读更多...
Patch2QL：开源供应链漏洞挖掘和检测的新方向

Patch2QL：开源供应链漏洞挖掘和检测的新方向

背景 开源生态的上下游中&#xff0c;漏洞可能存在多种成因有渊源的其它缺陷&#xff0c;统称为“同源漏洞”&#xff0c;典型如&#xff1a; 上游代码复用缺陷。开源贡献者在实现功能相似的模块时&#xff0c;常复用已有模块代码或逻辑&#xff1b;当其中某个模块发现漏洞后…
阅读更多...
成都爱尔林江院长解读儿童青少年为什么一定要进行医学验光配镜

成都爱尔林江院长解读儿童青少年为什么一定要进行医学验光配镜

根据国家卫健委数据显示&#xff1a;我国青少年儿童总体近视率为52.7%、高度近视人口超3000万。近视学生中,有10%为高度近视,且占比随年级升高而增长。 近视孩子之多&#xff0c;孩子视力发展备受关注。戴镜进行近视防控十分必要&#xff0c;且眼镜不可随意验配&#xff01; 成…
阅读更多...
2024年【安全员-B证】考试资料及安全员-B证模拟考试题库

2024年【安全员-B证】考试资料及安全员-B证模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年安全员-B证考试资料为正在备考安全员-B证操作证的学员准备的理论考试专题&#xff0c;每个月更新的安全员-B证模拟考试题库祝您顺利通过安全员-B证考试。 1、【多选题】《中华人民共和国安全生产法》规定&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023