纯前端使用ExcelJS插件导出Excel

需求背景:antd表格table纯前端页面导出表格数据

官网地址: https://github.com/exceljs/exceljs

介绍ExcelJS及其应用场景

简要说明ExcelJS的功能和在前端开发中的常见用途,如动态生成报表、导出数据等。

环境配置与安装

列出所需的依赖项,包括ExcelJS库的安装方式(npm或CDN引入)。

示例命令:

bash 复制代码
npm install exceljs
基本导出流程

创建一个新的工作簿(Workbook),添加工作表(Worksheet),填充数据并导出为Excel文件。

示例代码:

javascript 复制代码
const ExcelJS = require('exceljs');
//创建工作簿和工作表
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

//创建工作表的表头
//getColunm().value是表格表头数据: [{width:50,title:'序号'}, {width:50,title:'姓名'}]
const columnsData = getColunm().value.map((column, index) =>{
const width = column.width;
return {
    header: column.title,
    width: isNaN(width) ? 20: width/ 10,
}
worksheet.columns = columnsData;
高级功能:样式与格式

介绍如何设置单元格样式(字体、颜色、边框、对齐方式等)。

示例代码:

javascript 复制代码
//设置样式(文本垂直横向居中)
const headerRow = Worksheet.getRow(1);
headerRow._cells.forEach((cell) => {
    worksheet.getCell(cell._address).font = {
        family: 4,
        size: 10,
        bold:true,
    }
worksheet.getCell(cell._address).alignment = {vertical: 'middle', horizontal: 'center'};
})



//官网文档单个单元格设置样式
worksheet.getCell('A1').font = { bold: true, color: { argb: 'FF0000' } };
worksheet.getCell('A1').alignment = { vertical: 'middle', horizontal: 'center' };

最重要的:插入填充数据

javascript 复制代码
//填充数据
//resData.value是后端返回的数据
resData.value.forEach(v, i) =>[
    //前俩列是固定的,从第三列开始
    const keyvalue = ref([]);
    for (const key in v) {
        keyValue.value.push(v[key]);
    }
    //循环拿到数组对象插入数据
    worksheet.addRow(keyValue.value);
};

//获取每列数据,依次垂直居中对齐
worksheet.columns.forEach((column) =>{
    column.alignment = {vertical: 'middle',horizontal: 'center'};
};



//addRow插入,先插入第一行表头name和age,再次就是插入数据
worksheet.addRow(['Name', 'Age']);
worksheet.addRow(['Alice', 25]);
浏览器端导出与兼容性

介绍如何在浏览器中使用ExcelJS生成并下载Excel文件,兼容性问题及解决方案。

示例代码:

javascript 复制代码
workbook.xlsx.writeBuffer()
    .then(function (buffer){
        const blob = new Blob([buffer], { type: 'application/octet-stream'})

    // 下载 Excel 文件
    const filename= "下载的文件名.xlsx";
    if (typeof window.navigator.msSaveBlob !== 'undefined'){
        //兼容I浏览器
        window.navigator.msSaveBlob(blob, filename);
    } else {
            //其他浏览器
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download',filename);
            document.body.appendChild(1ink);
            link.click();
            document.body.removeChild(1ink);
        }
    })
    .catch(e) => {
        console.log('err', e);
    }

最后如图:

总结与扩展

总结ExcelJS的优势,并推荐进一步学习资源或相关插件(如SheetJS、xlsx等)。

相关推荐
袁煦丞20 分钟前
DS file文件管家远程自由:cpolar内网穿透实验室第492个成功挑战
前端·程序员·远程工作
用户0137412843721 分钟前
九个鲜为人知却极具威力的 CSS 功能:提升前端开发体验的隐藏技巧
前端
永远不打烊25 分钟前
Window环境 WebRTC demo 运行
前端
风舞26 分钟前
一文搞定JS所有类型判断最佳实践
前端·javascript
coding随想26 分钟前
哈希值变化的魔法:深入解析HTML5 hashchange事件的奥秘与实战
前端
一树山茶34 分钟前
uniapp在微信小程序中实现 SSE进行通信
前端·javascript
coding随想34 分钟前
小程序中的pageshow与pagehide事件,HTML5中也有?揭秘浏览器往返缓存(BFCache)
前端
萌萌哒草头将军39 分钟前
Rspack 1.5 版本更新速览!🚀🚀🚀
前端·javascript·vue.js
阿卡不卡43 分钟前
基于多场景的通用单位转换功能实现
前端·javascript
♡喜欢做梦1 小时前
jQuery 从入门到实践:基础语法、事件与元素操作全解析
前端·javascript·jquery