使用VUE+XLSX实现纯前端的导出Excel

最新推荐文章于 2025-02-19 09:58:51 发布

笨笨的幸福1230

最新推荐文章于 2025-02-19 09:58:51 发布

阅读量1k

点赞数 1

文章标签： javascript elementui 前端 vue.js webpack

本文链接：https://blog.youkuaiyun.com/qq_42709302/article/details/127066091

版权

本文介绍了如何在Vue项目中使用VUE+XLSX插件实现纯前端的Excel导出功能。在安装xlsx-style插件过程中遇到的‘./cptable’找不到的问题，解决方案是在vue.config.js中配置externals。对于Vue2.x和Vue3.x项目，分别给出了相应的webpack配置修改方法。此外，还展示了单工作簿和多工作簿的导出代码示例，并提供了处理版本不兼容问题的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装需要的插件

npm i xlsx -S
npm i xlsx-style -S
npm i file-saver -S

安装完xlsx-style插件并引入后启动项目会报错
./cptable in ./node_modules/xlsx-style/dist.cpexcel.js
出现这个问题时，需要在vue.config.js中的configureWebpack配置项中添加如下配置即可：
externals:{
‘./cptable’:‘var cptable’
}

vue导入xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

官方给出了解决方案，我们只需要修改一下配置
vue2x版本
就是有webpack配置
就是在webpack.base.conf.js中加入下面这段

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

vue3x版本
在根目录下的vue.config.js(没有的话自己创建一个)
加入下面的代码

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

2、引入并使用

//引入相关插件
import XLSX from "xlsx";
import XLSXStyle from 'xlsx-style';
import XLSX_SAVE from 'file-saver';
	
//导出的源数据
let originData = [//每一个Object对应excel一行的内容
  {
    "表头1":'value1',
    "表头2":"value2",
    "表头3":"value3"
  },
  {
    "表头1":'value1',
    "表头2":"value2",
    "表头3":"value3"
  }
];

let wb = {
  SheetNames:['工作簿名称'],
  Sheets:{},
  Props:{}
};

let ws = XLSX.utils.json_to_sheet(originData);
	
//设置表格每列的宽度
ws['!cols'] = [200,200,200];
	
//设置单元格属性
Object.keys(ws).forEach(key => {
  if(key.indexOf('!') < 0) {//判断是否是每个单元格
    //获取单元格的序号
    let num = key.replace(/[^0-9]/ig,"");
    if(num.length === 1 && +num ===1){//判断是否为首行
      //设置首行样式
      ws[key].s = {
        alignment: {
          horizontal:'center',//水平居中
          vertical:'center',//垂直居中
          wrapText:true//是否自动换行
        },
        border: {//设置边框
          top:{style:'thin'},
          bo

最低0.47元/天解锁文章