原文链接:html table 如何导出为excel表格案例分享_html table导出为excel-CSDN博客
项目框架为：ASP.NET Core Blazor，我们用的是自己的扩展方法，不是.net core框架的方法，因此在原文的基础上封装一个通用js，如下：
common.js
(function ($) {
$.extend({
contentAsFile: function (fileName, fileType, fileContent) {
var link = document.createElement('a');
link.download = fileName;
link.href = "data:" + fileType + ',' + fileContent;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
windowOpen: (url, target, specs) => {
window.open(url, target, specs);
},
toExcel: function (el,filename) {
var format = function (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}
var excelContent = $(el).html();
var excelFile = "<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'>";
excelFile += "<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>";
excelFile += "<body><table width='50%' border='1'>";
excelFile += excelContent;
excelFile += "</table></body>";
excelFile += "</html>";
//定义excel 的sheet名称
var ctx = { worksheet: "Sheet1" };
var v = window.btoa(unescape(encodeURIComponent(format(excelFile, ctx))))
var link = "data:application/vnd.ms-excel;base64," + v;
var a = document.createElement("a");
//定义excel 的文件名称
a.download = filename+".xls";
a.href = link;
a.click();
}
});
})(jQuery);
razor页面：
<Button class="me-2" style="width:95px;"
Size="BlzComponentSize.Medium"
Color="BlzComponentColor.Primary"
Text="@ButtonReportText"
OnClick="@btnReport_Click" />
<div class="flex-grow-1" style="overflow:auto; border:3px solid #808080;width:100%;background-color: #FFFFFF;display:block;">
<table style="height:100%;width:100%;display:@IsShow;" @ref="ReportTable">
<tr>
<td>序号</td>
<td>代号</td>
<td>名称</td>
</tr>
</table>
</div>
razor.cs后台调用：
private ElementReference ReportTable;
private async void btnReport_Click()
{
await JSRuntime.ExecuteVoidAsync("toExcel", ReportTable,"Sheet");
}
2599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
