html table 如何导出为excel表格案例分享

原文链接: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 = "";

excelFile += "";

excelFile += "

";

excelFile += excelContent;

excelFile += "

";

excelFile += "";

//定义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页面：

Size="BlzComponentSize.Medium"

Color="BlzComponentColor.Primary"

Text="@ButtonReportText"

OnClick="@btnReport_Click" />

序号

代号

名称

razor.cs后台调用：

private ElementReference ReportTable;

private async void btnReport_Click()

{

await JSRuntime.ExecuteVoidAsync("toExcel", ReportTable,"Sheet");

}