将 html table 导出到 asp.net 核心中的 excel 文件

Question

我想将视图的 html table 转换为 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 table 或模型 class 导出到 excel 文件。任何人都可以帮助我，我如何将 html table 导出到 excel？

Answer 1

我用谷歌搜索导出 html table 到 csv 文件。找到这个 link :

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);

编码正确导出。

Answer 2

您可以参考以下方法将table导出到excel文件

不使用Client-Side Library或Server-Side package，使用以下代码导出htmltable到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 table 到 excel.

右键单击 wwwroot 文件夹，然后单击添加和 客户端库...，输入FileSaver.js，点击Install按钮安装库。对 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 and xls.core.min.js.

网页看起来像这样：

通过使用此方法，您可以将 table 导出到 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 table 导出到 asp.net 核心中的 excel 文件

Export html table to excel file in asp.net core

html

export

html-table

export-to-excel

asp.net-core