vite项目中使用xlsx-style

SheetJS是前端操作Excel以及类似的二维表的最佳选择之一，而js-xlsx是它的社区版本。其功能强大，支持xls、xlsx、ods等十几种格式。npm库名称为xlsx，node库也叫node-xlsx，免费版不支持样式调整。而xlsx-style也来源于SheetJs/xlsx，并在社区版上添加了很多功能，其中最主要的功能是设置excel 的样式。

安装之后，不出意外应该会报错...

webpack 项目

在安装完xlsx-style后，应该会有报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx，解决的方法是:

• 在项目依赖包里修改下xlsx-style的源代码 node_modules\xlsx-style\dist\cpexcel.js

(function(root, factory){
  "use strict";
  if(typeof cptable === "undefined") {
    if(typeof require !== "undefined"){
      // ***** 此处注释并修改为 var cpt = cptable
      // var cpt = require('./cpt' + 'able');
      var cpt = cptable
      if (typeof module !== 'undefined' && module.exports) module.exports = factory(cpt);
      else root.cptable = factory(cpt);
    } else throw new Error("cptable not found");
  } else cptable = factory(cptable);
}(this, function(cpt){
	// ...
})

•  webpack.config.js | vue.config.js

module.exports = {
  // ....
  externals: [ {
    './cptable': 'var cptable'
  }]
}

// 或
module.exports = { 
    configureWebpack: { externals: { './cptable': 'var cptable' } } 
}

 vite项目 参考 https://www.kuangstudy.com/bbs/1395219908601679874

//1) 使用npm安装xlsx与xlsx-style包;
//2) 将xlsx-style中的dist下的xlsx.full.min.js复制到assets文件夹下
//3) 在index.html中引用
//4) 首先使用动态导入:import('xlsx').then(res => { ... })
//5) 然后定义一个变量接收res(不能是XLSX,避免与xlsx-style中的XLSX变量冲突) 如 const _XLSX = ""; _XLSX = res;
//6) 使用_XLSX对象完成excel的将table或者json转为sheet的功能
//7) 获取sheet对象后,先对此sheet进行style配置
//7.1) 参考地址: 官方文档或者 --> https://blog.csdn.net/qq_45368052/article/details/112915669
//8) 配置好样式后使用xlsx-style的XLSX变量对sheet进行写入:let wbout = XLSX.write(workbook, wopts);
//9) 然后将wbout对象转换为blob对象下载即可

相关链接

js-xlsx模块学习指南

js-xlsx使用

sheetjs

xlsx

xlsx-style