html table 如何导出为excel表格案例分享
原文连接：https://blog.csdn.net/weixin_36754290/article/details/126765337
项目框架为：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");
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！