將 html 表導出到 asp.net 內核中的 excel 文件

Question

我想將視圖的 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>

我在 web 中搜索，但沒有找到任何東西。 有關此問題的信息限制將 SQL 表或 model class 導出到 ZBF57C906FA7D2556D07372 文件。 誰能幫助我，我如何將 html 表導出到 excel？

Answer 1

您可以參考以下方法將表格導出到 excel 文件。

在不使用客戶端庫或服務器端 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文件夾，然后單擊Add and Client-Side Library... ，輸入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和xls.core.min.js。

web 頁面如下所示：

使用該方法可以將表格導出為excel、csv和txt文件。

使用ClosedXML package 。 這是一種服務器端方法。

通過 NuGet Package 管理器安裝 ClosedXML package。

創建一個動作將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文件，內容如下：

Answer 2

我用谷歌搜索將 html 表導出到 csv 文件。 並找到這個鏈接：

將 html 表導出到 CSV 文件

這很有幫助。

注意：我編輯此代碼是因為我的 output 文件編碼錯誤。 在“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);

並且編碼正確導出。

將 html 表導出到 asp.net 內核中的 excel 文件

問題描述

2 個解決方案

解決方案1
1 已采納 2020-12-30 08:41:41

解決方案2
0 2020-12-30 07:42:20

將 html 表導出到 asp.net 內核中的 excel 文件

問題描述

2 個解決方案

解決方案1 1 已采納 2020-12-30 08:41:41

解決方案2 0 2020-12-30 07:42:20

解決方案1
1 已采納 2020-12-30 08:41:41

解決方案2
0 2020-12-30 07:42:20