📜  如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格?

📅  最后修改于: 2021-11-07 08:12:56             🧑  作者: Mango

您创建的任何 HTML 表格都可以使用 jQuery 转换为 Excel 电子表格,并且它与所有浏览器兼容。有两种简单的方法需要基本的 HTML 和 jQuery 知识来实现这一点。

  • 方法 1:使用 jQuery 插件:一个简单的 jQuery 插件“table2excel”可用于将 HTML 表格转换为 Excel 表格。

    句法:

    $("#table-id").table2excel({
        filename: "excel_sheet-name.xls"
    });

    例子:

    
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
          
        
            
            
            
            
        
      
    
    IDNameAgeAddress
    101Alex15Maldives
    102Chris14Canada
    103Jay15Toronto
      

    输出:

    ID    Name    Age    Address
    101    Alex    15    Maldives
    102    Chris    14    Canada
    103    Jay    15    Toronto

    上面的输出以与 HTML 表格完全相同的方式转换为 Excel 电子表格。

    关于“table2excel”: “table2excel”是一个简单而有用的 jQuery 插件,允许将 HTML 表格数据导出到 Excel 文件。 ‘table2excel’还具有排除包含指定类的单元格的功能。

    noExport 的语法:

    $(document).ready(function() {
        $("#table-id").table2excel({
            exclude: ".noExport",
            filename: "name-of-the-file",
        });
    });

    排除某些指定单元格的示例代码:

    
    
      
    
    
        
            
                
                
            
        
        
            
                
                
            
            
                
                
            
        
                    This cell will not be exported.                              This cell will get exported.             
    AlexMaldives
    ChrisCanada

    笔记:
    在上面的示例代码中,类“.noExport”已用于从 HTML 表格数据中排除那些指定的单元格。因此,导出的 Excel 电子表格也不包括 HTML 表格数据中的那些单元格。

  • 方法 2:使用简单的 HTML:考虑上面相同的学生表来理解下面的内容。让我们在代码中使用一个按钮,单击该按钮可将 HTML 数据表转换为 Excel 电子表格。

    请注意,下方的“导出”按钮实际上并未将 HTML 表格转换为 Excel 表格。这必须在适当且已经存在的 HTML 代码中使用才能获取 Excel 电子表格,并且在此 IDE 中不起作用。

    
    
      
    
        
            HTML Table To Excel 
            spreadsheet using
            HTML only
        
    
      
    
        
            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
        
    IDNameAgeAddress
    101Alex15Maldives
    102Chris14Canada
    103Jay15Toronto
              

    输出:

HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。

jQuery 是一个开源 JavaScript 库,它简化了 HTML/CSS 文档之间的交互,它以其“少写,多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。