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

笨笨的幸福1230

关注

最新推荐文章于 2024-11-25 17:37:30 发布 · 1.1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Vue应用中使用xlsx库实现Excel文件导出的完整指南在Vue中使用xlsx库的详细教学，文章开头展示了一个实战例子帮助快速入手，接下来详细解释了Vue中使用xlsx库的详细步骤帮助深入理解其内容阅读详情

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'},
          bottom:{style:'thin'},
          right:{style:'thin'}
        },
        fill:{
          fgColor:{rgb:ws[key].v.indexOf('必填') === -1 ? "E1F3D8" : "F56C6C"};//单元格背景色的填充
        }
      }
    } else {//非首行的单元格样式
      ws[key].s = {
        alignment: {
          horizontal:'center',
          vertical:'center',
          wrapText:true
        }
      }
    }
  }
})
						  
wb.Sheets[工作簿名称] = ws;
const wbout = XLSXStyle.write(wb,{
  type:"binary",
  bookType:"xlsx"
})
XLSX_SAVE.saveAs(new Blob([s2ab(wbout)],{type:'application/octet-stream'}),导出的excel文件名称);
						  
const s2ab = s => {
  let buf = new ArrayBuffer(s.length);
  let view = new Uint8Array(buf);
  for(let i = 0; i != s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

3、vue项目中的简单封装使用

单工作簿的导出，可直接复制调用

//导出excel方法
import XLSX from "xlsx";
import XLSXStyle from 'xlsx-style';
import XLSX_SAVE from 'file-saver';

/*
 *
 * originData => 导出的表格数据，最后传入的格式为：  ****必传****
 *  [
 *    {
 *      '表头1':'xxx1',
 *      '表头2':'yyy1',
 *      '表头3':'zzz1',
 *    },
 *    {
 *      '表头1':'xxx2',
 *      '表头2':'yyy2',
 *      '表头3':'zzz2',
 *    },
 *  ]
 *
 * sheetName => excel表格里的sheet名称  ****必传****
 *
 * excelName => excel表格的名称  ****必传****
 *
 * colWidth => 表格列宽  可传可不传
 *    ==> 不传默认为200
 *    ==> 可传数字，代表所有列宽均为此宽度
 *    ==> 可传数组，[200,300,400,500,...]按数组值依次设置列宽
 *
 */


export const exportExcel = (originData,sheetName,excelName,colWidth) =>{
  let sheet  = sheetName ? sheetName : '导出的excel';
  let excel  = excelName ? excelName : '导出的excel';
  let columnWidth = [];
  if (colWidth){
    if (typeof colWidth === "number"){//只传了列宽的值，表明所有列宽均为此值
      if (originData.length) {
        Object.keys(originData[0]).forEach(item=>{
          columnWidth.push({wpx:colWidth})
        })
      }
    }else if (colWidth instanceof Array) {//传进来的是数组，按顺序依次赋值
      colWidth.forEach(item=>{
        columnWidth.push({wpx:item});
      })
    }
  }else {
    if (originData.length) {
      Object.keys(originData[0]).forEach(item=>{
        columnWidth.push({wpx:200})
      })
    }
  }
  var wb = {
    SheetNames: [sheet],
    Sheets: {},
    Props: {},
  }
  var ws = XLSX.utils.json_to_sheet(originData);
  ws['!cols'] = columnWidth;
  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'
            },
            bottom: {
              style: 'thin'
            },
            right: {
              style: 'thin'
            }
          },
          fill:{
            fgColor: { rgb: ws[key].v.indexOf('必填') === -1 ? "E1F3D8" : 'F56C6C' },
          }
        }
      }else {
        ws[key].s = {
          alignment: {
            horizontal: 'center',
            vertical: 'center',
            wrapText: true,
          },
        }
      }
    }
  })

  wb.Sheets[sheet] = ws
  const wbout = XLSXStyle.write(wb, {
    type: 'binary',
    bookType: 'xlsx',
  })
  XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream',}), `${excel}.xlsx`);
}

const s2ab = (s) =>{
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

多工作簿的导出，可直接复制调用

//导出excel方法
import XLSX from "xlsx";
import XLSXStyle from 'xlsx-style';
import XLSX_SAVE from 'file-saver';

/*
 *
 * originArr => 导出的表格数据，最后传入的格式为：  ****必传****
 *  [
 *    {
 *       originData:[
 *        {
 *          '表头1':'xxx1',
 *          '表头2':'yyy1',
 *          '表头3':'zzz1',
 *        },
 *        {
 *          '表头1':'xxx2',
 *          '表头2':'yyy2',
 *          '表头3':'zzz2',
 *        },
 *      ],
 *      sheetName:"xxxx",
 *      colWidth:200
 *    }
 *  ]
 *
 *
 * excelName => excel表格的名称  ****必传****
 *
 *
 */


export const exportMoreExcel = (originArr,excelName) =>{
  let sheetName = [];
  let excel  = excelName ? excelName : '导出的excel';
  originArr.forEach(item=>{
    sheetName.push(item.sheetName);
  })
  var wb = {
    SheetNames: sheetName,
    Sheets: {},
    Props: {},
  }
  originArr.forEach(originItem=>{
    let {originData,sheetName,colWidth} = originItem;
    let columnWidth = [];
    if (colWidth){
      if (typeof colWidth === "number"){//只传了列宽的值，表明所有列宽均为此值
        if (originData.length) {
          Object.keys(originData[0]).forEach(item=>{
            columnWidth.push({wpx:colWidth})
          })
        }
      }else if (colWidth instanceof Array) {//传进来的是数组，按顺序依次赋值
        colWidth.forEach(item=>{
          columnWidth.push({wpx:item});
        })
      }
    }else {
      if (originData.length) {
        Object.keys(originData[0]).forEach(item=>{
          columnWidth.push({wpx:200})
        })
      }
    }

    var ws = XLSX.utils.json_to_sheet(originData);
    ws['!cols'] = columnWidth;
    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'
              },
              bottom: {
                style: 'thin'
              },
              right: {
                style: 'thin'
              }
            },
            fill:{
              fgColor: { rgb: ws[key].v.indexOf('必填') === -1 ? "E1F3D8" : 'F56C6C' },
            }
          }
        }else {
          ws[key].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: true,
            },
          }
        }
      }
    })

    wb.Sheets[sheetName] = ws
  })

  const wbout = XLSXStyle.write(wb, {
    type: 'binary',
    bookType: 'xlsx',
  })
  XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream',}), `${excel}.xlsx`);
}

const s2ab = (s) =>{
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

4.vue安装xlsx

npm install xlsx --save
npm install file-saver --save

package.json

"file-saver": "^2.0.5",
"xlsx": "^0.18.3"`

版本不兼容导致"export default (imported as ‘XLSX’) was not found in ‘xlsx’

先卸载：npm uninstall xlsx

之后重新安装低版本：npm install xlsx@0.17.0 --save

标签

#javascript #elementui #前端 #vue.js #webpack

XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能 vue xlsx读取excel文件阅读详情

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

相关推荐