【免费】Excel前端JavaScript导出，减轻后端服务器导出负担.zip

共9个文件

js：4个

license：1个

gitignore：1个

需积分: 0 10 浏览量 2024-03-03 16:13:32 上传评论收藏 302KB ZIP 举报

在现代Web应用中，数据处理和导出是常见的需求，特别是在数据分析、报表生成等领域。Excel是一种广泛使用的电子表格工具，用户通常希望直接在网页上就能完成数据导出为Excel格式的操作。"Excel 前端JavaScript导出，减轻后端服务器导出负担"的主题旨在介绍如何通过前端JavaScript技术实现这一功能，从而降低对后端服务器的压力。我们需要理解为什么要在前端进行Excel导出。传统的做法是，前端请求数据，后端服务器处理数据并生成Excel文件，然后将文件发送回前端供用户下载。这种模式可能导致服务器负载增加，尤其是在大数据量或者频繁导出的情况下。如果能在前端处理，可以显著减少服务器的计算和网络传输负担。实现前端Excel导出的关键在于找到合适的JavaScript库。"Excel-XLSX-Export-master"这个文件名暗示我们可能使用的是`xlsx`库，这是一个流行的JavaScript库，用于读写Excel文件（XLSX格式）。`xlsx`库支持从JSON、CSV等格式的数据直接生成XLSX文件，非常适合前端使用。使用`xlsx`库的基本步骤如下： 1. **数据准备**：你需要将前端展示的数据转换成适合导出的格式，通常是JSON数组。每个数组元素代表一个工作表的行，而元素内的对象属性对应于列的标题和值。 2. **创建工作簿对象**：使用`xlsx-style`库（如果需要样式）或`xlsx`库创建一个工作簿对象，这是Excel文件的基础结构。你可以定义多个工作表，每个工作表包含一系列行数据。 3. **写入数据**：将准备好的数据写入工作簿对象。`xlsx`库提供API，如`XLSX.utils.json_to_sheet`将JSON数据转换为工作表，然后可以用`XLSX.utils.book_append_sheet`添加到工作簿。 4. **生成二进制文件**：使用`XLSX.writeFile`或`XLSX.write`方法，将工作簿对象转换为二进制的.xlsx文件内容。 5. **触发下载**：使用HTML5的`Blob`和`URL.createObjectURL`创建一个临时的文件URL，然后通过`a`标签的`download`属性触发浏览器下载。此外，为了优化用户体验，前端导出时可以考虑以下几点： - **异步处理**：由于数据转换和文件生成可能会占用一定时间，应使用Promise或async/await进行异步处理，避免阻塞用户界面。 - **分批导出**：对于大数据量，可以分批导出，减少内存占用和计算时间。 - **进度提示**：显示导出进度，让用户知道操作状态。 - **错误处理**：提供错误处理机制，确保在出现异常时能够向用户反馈。通过这样的前端JavaScript导出方式，我们可以实现高效且灵活的Excel文件生成，有效缓解后端服务器的压力，同时提升用户体验。不过，需要注意的是，前端导出可能不适用于所有场景，例如涉及敏感数据时，出于安全考虑，仍需在后端处理。

资源推荐

资源详情

资源评论

收起资源包目录

Excel 前端JavaScript导出，减轻后端服务器导出负担.zip （9个子文件）

Excel-XLSX-Export-master

.gitattributes 83B

excelExport.html 4KB

sheetjs

xlsxStyle.utils.js 29KB

xlsxStyle.core.min.js 821KB

xlsxExport.utils.js 5KB

xlsx.core.min.js 469KB

LICENSE 11KB

.gitignore 174B

README.md 12KB

> 详情地址： https://www.arcinbj.com/ ### 一、需求描述在很多OA或者CRM项目中，基本上都会涉及到Excel的导入导出的问题。首先想到了**POI**和阿里的**EasyExcel**。如果是小打小闹，导几千数据玩玩，服务器本身基本没什么压力，但是动辄导出上万的数据，那服务器肯定是吃不消的（这里指的是没有对导出Excel服务器做优化或者负载处理） ### 二、设计思路 **传统Java后端导出Excel思路** ![前端export2](https://www.arcinbj.com/upload/2020/05/前端export2-e3d15d86a62c446d912cadbbc5dd2768.jpg) ++1.导出Excel，如果在Java后端的话，且导出的数据量比较大，且又处于高并发的情况，服务器内存会被瞬间占满（如果数据量较大，POI会有内存泄漏的风险），CPU占用率也会持续升高（Excel生成二进制文件，是非常吃CPU性能的）++ **前端JavaScript导出Excel思路** ![前端export3](https://www.arcinbj.com/upload/2020/05/前端export3-df51f8985d104c20b7dea8c2dc0b15f4.jpg) ++2.但是如果把生成Excel的工作交给前端浏览器去完成，后端这是做一个数据发包，而浏览器拿到数据后在自己本地客户端执行生成文件，占用的CPU资源也是客户端的，即使再大的数据也对服务端没有太大影响++ ### 三、技术框架 SheetJS（又名js-xlsx，npm库名称为xlsx，node库也叫node-xlsx，以下简称JX），免费版不支持样式调整。（顺便吐槽下这些名字乱的不行。。实际上又是同一个东西= = > JX官方说明文档：https://github.com/SheetJS/js-xlsx XLSX-Style（npm库命名为xlsx-style，以下简称XS）基于JX二次开发，使其支持样式调整，但其开发停留在2017年，所基于的JX版本老旧，缺失许多方法。因而诞生了这个项目。 > XS官方说明文档：https://github.com/protobi/js-xlsx XLSX-Style-Utils：其本体为xlsxStyle.utils.js > XSU原作者开源地址 https://github.com/Ctrl-Ling/XLSX-Style-Utils 以下简称 XSU XLSX-Export-Utils：其本体为xlsxExport.utils.js 以下简称 XEU ++本项目开源地址 ☆☆☆☆☆++ > 本项目开源地址 https://github.com/hiparker/Excel-XLSX-Export ### 四、兼容性 ![前端export6-兼容](https://www.arcinbj.com/upload/2020/05/前端export6-兼容-f5141375611b4d729696899bca8fd80e.png) ### 五、核心包描述 ![前端export1-core](https://www.arcinbj.com/upload/2020/05/前端export1-core-6e24ae32064c49479166c99eb01a3b9a.jpg) > xlsx.core.min.js JX最新版核心文件，建议在将网页表格导成workbook时使用其方法 > xlsxStyle.core.min.js XS最新版核心文件，因为其原本命名与JX一样，避免冲突改名成xlsxStyle > xlsxStyle.utils.js 基于XS的方法二次封装，更好的控制导出excel的样式。以下简称XSU > xlsxExport.utils.js XEU本项目核心文件，基于XS 与 XSU的方法二次封装，更好的控制导出excel的样式。以下简称XEU ### 六、代码解析 > excelExport.html ``` <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Parker Zhou"> <title>JavaScript导出Excel</title> </head> <body link="blue" vlink="purple"> <div style="margin:50 auto;width:90%"> <table id="print-content" border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'></table> <br>  <input type="button" onclick="excelExport()" value="导出表格" ></input> <div>  <script src="js/sheetjs/xlsx.core.min.js" ></script> <script src="js/sheetjs/xlsxStyle.core.min.js" ></script> <script src="js/sheetjs/xlsxStyle.utils.js" ></script> <script src="js/sheetjs/xlsxExport.utils.js" ></script> <script> // 数据 var data = { "success":true, "errorCode":"-1", "msg":"导出成功", "body":{ "title":"个人信息", "excelData":[ ["序号","姓名","年龄","性别","手机","邮箱","金额","创建日期"], [1,"周一",28,"男","13888888881","1@q.com",4123.3,"2020-05-01"], [2,"崔二",25,"女","13888888882","2@q.com",23432,"2020-05-03"], [3,"张三",15,"男","13888888883","3@q.com",433.14,"2020-05-02"], [4,"李四",27,"男","13888888884","4@q.com",6523,"2020-05-01"], [5,"王五",18,"男","13888888885","5@q.com",411.36,"2020-05-04"], [6,"赵六",21,"男","13888888886","6@q.com",1234,"2020-05-08"], [7,"唐七",22,"女","13888888887","7@q.com",4321.75,"2020-05-05"], [8,"范八",19,"男","13888888888","8@q.com",4322,"2020-05-06"], [9,"薛九",31,"女","13888888889","9@q.com",56465,"2020-05-01"], [10,"闫十",45,"男","13888888810","10@q.com",7864,"2020-05-07"] ] } }; // 导出excel function excelExport(){ if(data.success){ if(null != data.body && undefined != data.body){ // 调取封装方法-导出excel XSExport.excelExport( data.body.excelData, data.body.title ); } } } // --------------------------------------------------------------------------------- // 以下不重要 // 页面测试展示使用 - 创建页面表格 function createTableElement(data){ var tableBodyHtml = "<tr><td colspan='"+data.body.excelData[0].length+"' style='text-align: center;font-size:22px;font-family: Arial;font-weight: bold;height: 40px;'>"+data.body.title+"</td></tr>"; // 生成Element data.body.excelData.forEach(function(val,index){ var trBodyHtml = '<tr height="20" style="text-align: center;font-size:12px">'; val.forEach(function(value){ // 第一行小标题 if(0 === index){ trBodyHtml += '<td style="font-weight: bold;background-color:#808080;color:#ffffff">'; trBodyHtml += '<div title="'+value+'" style="width: 125px;height: 16px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">'+value+'</div>'; trBodyHtml += '</td>'; }else{ trBodyHtml += '<td style="">'; trBodyHtml += '<div title="'+value+'" style="width: 125px;height: 16px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">'+value+'</div>'; trBodyHtml += '</td>'; } }); trBodyHtml += '</tr>'; tableBodyHtml += trBodyHtml; }); document.querySelector('#print-content').innerHTML = tableBodyHtml; } createTableElement(data); </script> </body> </html> ``` > xlsxExport.utils.js ``` /* @author Parker @version 2020-05-08 @aim 对xlsx-style方法进行二次封装方便调用以导出带样式Excel @aim 对 XSU 进行封装和调用 @usage XSExport.xxxx() 依赖于 1. xlsx.core.min.js 2. xlsxStyle.core.min.js 3. xlsxStyle.utils.js */ var XSExport = {}; /** * 通用的打开下载对话框方法，没有测试过具体兼容性 * @param url 下载地址，也可以是一个blob对象，必选 * @param saveName 保存文件名，可选 */ XSExport.openDownloadDialog = function(url, saveName){ if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效 var event; if(window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } aLink.dispatchEvent(event); } /** * 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载 * @param sheet sheet数据 * @param sheetName excel页内签 */ XSExport.sheet2blob = function(sheet, sheetName) { var that = this; sheetName = sheetName || 'sheet1';

评论收藏

内容反馈