Web优雅的实现大数据量Excel导出

您所在的位置：网站首页 › php大数据导出实现什么功能 › Web优雅的实现大数据量Excel导出

Web优雅的实现大数据量Excel导出

2023-05-29 11:12| 来源: 网络整理| 查看: 265

在做系统后台的时候，一般Excel表导出的方案是在服务器生成Excel表，返回给浏览器Excel文件地址，触发下载。当要导出的Excel行数达到数万行时，占用大量的服务器CPU或内存不说，还容易请求超时，还要改nginx配置。我就想，能否在前端浏览器创建Excel表呢？之后找到一个合适的js库可以实现这个功能：js-xlsx。官方github地址：https://github.com/SheetJS/js-xlsx

实现思路

1、浏览器创建xlsx 2、每次ajax向后端请求若干行的数据，直到请求完成 3、触发下载

本文省略php,web服务器等环境搭建步骤。看懂接下来代码实现，需要有一些js,html,PHP,ajax的一些相关知识。

1、js-xlsx库安装使用

本文使用npm安装js-xlsx,如果不用npm，可以直接去https://github.com/SheetJS/js-xlsx/releases下载压缩包(很卡,我的网下不动)。

创建项目目录后，执行以下命令，下载js-xlsx包：

npm init npm install xlsx

创建index.html在header中引入

demo 2、创建html页面元素

index.html

导出进度:0%

浏览器显示：

image.png 3、添加js代码，初始化excel工作簿全局变量/excel sheet全局变量，绑定按钮点击事件 //每次请求多少行数据 const ROWS_PER_REQ = 1000; //总行数 let totalRows = 0; //excel工作簿全局变量 let workBook = null; //excel sheet全局变量 let workSheet = null; //开始导出按钮绑定事件 document.getElementById("startBtn").addEventListener('click',()=>{ //初始化 initWorkBook(); console.log("导出开始!"); getTotal(); }); function initWorkBook(){ //创建excel工作簿对象 workBook = XLSX.utils.book_new(); //创建excel第一行，头部 let headArr = [ ['第一列', '第二列', '第三列', '第四列', '第五列', '时间'], ]; //根据头部数组创建excel sheet workSheet = XLSX.utils.aoa_to_sheet(headArr); //把excel sheet添加到工作簿 XLSX.utils.book_append_sheet(workBook, workSheet, 'sheet1'); }

getTotal()函数见下章。这里的js-xlsx库的几个用法解释:

XLSX.utils.book_new(); 创建并返回一个excel工作簿对象，可以理解为excel文件

XLSX.utils.aoa_to_sheet(headArr); 接受一个二维数组作为参数，创建一个excel sheet对象(一个excel标签页)

XLSX.utils.book_append_sheet(workBook, workSheet, 'sheet1'); 把excel sheet对象添加到工作簿对象,并命名为'sheet1'

4、发送Ajax请求从服务器获取数据总行数

index.html:

//发送Ajax请求从服务器获取数据总行数 function getTotal() { let xhr = new XMLHttpRequest(); xhr.open('GET', 'get_data.php?getTotal=true'); xhr.responseType = "json"; xhr.onload = function(){ //接收到总行数 totalRows = xhr.response.total; console.log("总行数:",totalRows); //开始接收数据 getRowsFromServer(0, ROWS_PER_REQ); }; xhr.send(); }

获取到总行数后，保存到全局变量totalRows, getRowsFromServer函数见下章

后端get_data.php:

【本文地址】

Web优雅的实现大数据量Excel导出

Web优雅的实现大数据量Excel导出

今日新闻

推荐新闻