将html表导出到asp.net core中的excel文件

如何解决将html表导出到asp.net core中的excel文件

我想将视图的 html 表格转换为 excel 格式的文件。类似的东西：

@model DataTable
<table class="table table-hover table-responsive  table-striped">
<thead>
    <tr >
        @foreach (DataColumn col in Model.Columns)
        {
            <th class="border-white">@col.Caption</th>
        }
    </tr>

</thead>
<tbody>
    @foreach (DaTarow row in Model.Rows)
    {
        <tr>
            @foreach (DataColumn col in Model.Columns)
            {
                <td class="border-white">@row[col.ColumnName]</td>
            }
        </tr>
    }

</tbody>

我在网上搜索，但没有找到任何东西。有关此问题的信息限制将 sql 表或模型类导出到 Excel 文件。任何人都可以帮助我，如何将 html 表导出到 excel？

解决方法

您可以参考以下方法将表格导出到excel文件中。

不使用Client-Side Library或Server-Side package，使用如下代码将html表格导出为excel。

 @using System.Data
 @model DataTable
 <table id="tblExport" class="table table-hover table-responsive  table-striped">
     @*table content*@ 
 </table>

 <input type="button" onclick="tableToExcel('tblExport','W3C Example Table')" value="Export to Excel">
 @section scripts{ 
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         var tableToExcel = (function () {
             var uri = 'data:application/vnd.ms-excel;base64,',template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },format = function (s,c) { return s.replace(/{(\w+)}/g,function (m,p) { return c[p]; }) }
             return function (table,name) {
                 if (!table.nodeType) table = document.getElementById(table)
                 var ctx = { worksheet: name || 'Worksheet',table: table.innerHTML }
                 window.location.href = uri + base64(format(template,ctx))
             }
         })()
     </script>
 }

[注意] 使用此方法，将导出一个.xls excel 文件。当您尝试打开生成的 Excel 文件时，您将收到来自 Microsoft Excel 应用程序的警告消息。显示此警告是因为生成的文件不是有效的 Excel 格式，因为插件只是将 HTML 内容导出到 Excel 文件。

excel内容如下：

使用 FileSaver.js 插件和 TableExport 插件将 html 表格导出到 excel。

右键单击 wwwroot 文件夹，然后单击添加和客户端库...，输入 FileSaver.js 并单击安装按钮来安装库。对 TableExport 插件执行相同操作。

然后，使用下面的代码导出数据。

 @using System.Data
 @model DataTable
 <table id="tblExport" class="table table-hover table-responsive  table-striped">
     @*table content*@ 
 </table>
 @section scripts{
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="~/lib/TableExport/css/tableexport.min.css" />
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/js/Blob.js"></script>
     <script src="~/js/xls.core.min.js"></script>
     <script src="~/lib/FileSaver.js/FileSaver.min.js"></script>
     <script src="~/lib/TableExport/js/tableexport.min.js"></script>
     <script type="text/javascript">
         $(function () {
             var tables = $("#tblExport").tableExport({
                 bootstrap: true,headings: true,footers: true,formats: ["xlsx","xls","csv","txt"],fileName: "MyExcel",position: "top",ignoreRows: null,ignoreCols: null,ignoreCSS: ".tableexport-ignore",emptyCSS: ".tableexport-empty",trimWhitespace: true
             });
         });
     </script> 
 }

您可以创建 Blob.js 和 xls.core.min.js 文件，并在以下链接中添加来自 js 内容的内容：Blob.js 和 xls.core.min.js。

网页如下所示：

使用此方法，您可以将表格导出为 excel、csv 和 txt 文件。

使用ClosedXML package。这是一种服务器端方法。

通过 NuGet 包管理器安装 ClosedXML 包。

创建一个动作将DataTable导出到excel，代码如下：

 //index page: display the table data.
 public IActionResult ExportExcel()
 {
     var custTable = CreateDataTable();
     return View(custTable);
 }
 public IActionResult ExportDataTabletoExcel()
 {
     var dt = CreateDataTable();
     using (XLWorkbook wb = new XLWorkbook())
     {
         wb.Worksheets.Add(dt);
         using (MemoryStream stream = new MemoryStream())
         {
             wb.SaveAs(stream);
             return File(stream.ToArray(),"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","Grid.xlsx");
         }
     }
 }
 public DataTable CreateDataTable()
 {
     // Create a new DataTable.    
     DataTable custTable = new DataTable("Customers");
     DataColumn dtColumn;
     DataRow myDataRow;
     ... //add columns and rows.
     return custTable;
 }

查看页面中的代码：

 @using System.Data
 @model DataTable
 <table id="tblExport" class="table table-hover table-responsive  table-striped">
     @*table content*@ 
 </table>

 <a href='@Url.Action("ExportDataTabletoExcel","Home")'> export to excel</a>

使用该方法会生成一个.xlsx文件，内容如下：

我用谷歌搜索将 html 表导出到 csv 文件。并找到此链接：

Export html table to CSV file

很有帮助。

注意：我编辑此代码是因为我的输出文件编码错误。在“jquery.tabletoCSV.js”文件中，需要修改如下代码：

        var uri = 'data:text/csv;charset=UTF-8,' + encodeURIComponent(csv);

代替顶行代码，我写道：

        var uri = 'data:text/csv;charset=UTF-8,%EF%BB%BF' + encodeURIComponent(csv);

并且编码正确导出。