js获取表格数据并利用SheetJS导出excel

一、背景

        在web开发中，数据表格是一种常见的展示形式。然而，手动处理表格数据并导出为Excel文件是一项繁琐的任务。为了解决这个问题，我们可以使用JavaScript来获取表格数据，并使用SheetJS库将其导出为Excel文件。

二、步骤

 1.安装SheetJS库。

安装方法有两种：可以通过npm安装，也可以直接下载文件。

通过npm安装SheetJS：

npm install xlsx

直接下载SheetJS，可以在官网（https://sheetjs.com）中下载压缩包，或者使用CDN直接引入。

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

2.获取表格数据

        在JavaScript代码中，我们可以通过DOM操作获取表格数据。假设我们的表格有一个id为"myTable"，那么我们可以使用以下代码获取表格数据：

 let data = [];  
 $("#myTable").find('tr').each(function() {  
     let row = [];  
     $(this).find('td, th').each(function() {  
        row.push($.trim($(this).text()));  
     });  
     data.push(row);  
 });  

        这段代码将获取表格中的所有行和列，并将它们存储在一个对象数组中。$.trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。

3.导出为Excel文件

        接下来，我们可以使用SheetJS库将数据导出为Excel文件，可以使用以下代码将数据导出为Excel文件：

const worksheet = XLSX.utils.aoa_to_sheet(data);  
const workbook = XLSX.utils.book_new();  
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");  
XLSX.writeFile(workbook, '文件名.xlsx');  

        这段代码将创建一个新的Excel工作簿，并将每个数据对象转换为工作表对象，然后将它们添加到工作簿中。最后，使用writeFile方法将工作簿写入名为"文件名.xlsx"的文件中。

三、完整代码 

    // 获取表格数据  
    function getTableData(table) {  
        let data = [];  
        table.find('tr').each(function() {  
            let row = [];  
            $(this).find('td, th').each(function() {  
                row.push($.trim($(this).text()));  
            });  
            data.push(row);  
        });  
        return data;  
    }  
        
    // 生成 Excel 文件  
    function generateExcel(data, filename) {  
        const worksheet = XLSX.utils.aoa_to_sheet(data);  
        const workbook = XLSX.utils.book_new();  
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");  
        XLSX.writeFile(workbook, filename);  
    }  

    // 点击按钮，获取表格并生成 Excel 文件  
    $("#export").click(function(){
        let tableData = getTableData($('#myTable'));  
        generateExcel(tableData, '文件名.xlsx');  
    })

        这段代码中，getTableData 函数用于从 jQuery 对象中提取表格数据，generateExcel 函数则使用 SheetJS 将数据转化为 Excel 文件。最后，在点击事件中，我们获取了表格数据并生成了 Excel 文件。

注意：这段代码仅适用于 HTML 中的表格，并且需要 jQuery 和 SheetJS 的支持。

四、总结

        通过以上步骤，我们使用JavaScript获取表格数据，并利用SheetJS库将其导出为Excel文件。这种方法不仅简化了数据导出过程，还提高了数据处理的效率。在web开发中，这种方法非常有用，可以帮助我们轻松地将表格数据导出为Excel文件，以便于数据分析和处理。