在对服务器进行巡检后，我们需要保存一份巡检的日志下来，虽然可以通过sprie.xls第三方控件保存为excel，但是感觉还是直接生成网页更加方便。这里使用到了VUE2+elementUI的单页面。
对于生成网页的问题，网上看到一个例子，是直接在代码中拼页面，感觉太累还不好修改，如下
/// <summary> /// 把DataTable转换成网页格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public string ExportDatatableToHtml(DataTable dt) { StringBuilder strHTMLBuilder = new StringBuilder(); strHTMLBuilder.Append("<html >"); strHTMLBuilder.Append("<head>"); strHTMLBuilder.Append("</head>"); strHTMLBuilder.Append("<body>"); strHTMLBuilder.Append("<table border=‘1px‘ cellpadding=‘1‘ cellspacing=‘1‘ bgcolor=‘lightyellow‘ style=‘font-family:Garamond; font-size:smaller‘>"); //Close tags. strHTMLBuilder.Append("</table>"); strHTMLBuilder.Append("</body>"); strHTMLBuilder.Append("</html>"); string Htmltext = strHTMLBuilder.ToString(); return Htmltext; }
其实我们可以先做一个网页模板，然后替换掉里面的数据就可以了，这样子换模版方便，也容易修改网页的布局。
在vs2010中新建一个普通的网页，标题和数据的部分做个标记，用于后续的替换。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<el-row type="flex" class="row-bg" justify="center">
<h3>标题</h3>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="20">
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">>
<el-table-column prop="名称" label="名称" width="180" sortable></el-table-column>
<el-table-column prop="方式" label="方式" width="180" sortable></el-table-column>
<el-table-column prop="设备类型" label="设备类型" sortable></el-table-column>
<el-table-column prop="地址" label="地址"></el-table-column>
<el-table-column prop="验证结果" label="验证结果" sortable></el-table-column>
<el-table-column prop="验证时间" label="验证时间"></el-table-column>
</el-table>
</el-col>
</el-row>
</template>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: ‘#app‘,
data: function () {
return {
tableData:|
}
},
methods: {
tableRowClassName({row, rowIndex}) {
if (row.验证结果 === "验证失败") {
return ‘warning-row‘;
} else {
return ‘success-row‘;
}
return ‘‘;
}
},
})
</script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
<style>
.el-table .warning-row {
background: #F56C6C;
}
h3
{
color:#409EFF;
}
.el-table .warning-row {
background: #F56C6C;
}
</style>
</html>
/// <summary> /// DataTable转换为JSON /// </summary> /// <param name="table"></param> /// <returns></returns> public string DataTableToJsonWithJsonNet(DataTable table) { string JsonString = string.Empty; JsonString = JsonConvert.SerializeObject(table); return JsonString; }
//保存巡检的结果信息 string FileName = ""; DataTable Dt = new DataTable(); Dt.Columns.Add("名称"); Dt.Columns.Add("方式"); Dt.Columns.Add("设备类型"); Dt.Columns.Add("地址"); Dt.Columns.Add("验证结果"); Dt.Columns.Add("验证时间"); string mc = ""; string fs = ""; string sblx = ""; string dz = ""; string yzjg = ""; string yzsj = DateTime.Now.ToString(); for (int i = 0; i < DG_show.Rows.Count - 1; i++) { mc = DG_show.Rows[i].Cells["名称"].Value.ToString().Trim(); fs = DG_show.Rows[i].Cells["方式"].Value.ToString().Trim(); sblx = DG_show.Rows[i].Cells["设备类型"].Value.ToString().Trim(); dz = DG_show.Rows[i].Cells["地址"].Value.ToString().Trim(); yzjg = DG_show.Rows[i].Cells["验证结果"].Value.ToString().Trim(); Dt.Rows.Add(mc, fs, sblx, dz, yzjg, yzsj); }
//导出为网页版的日志记录 FileName = @"data\\服务器巡检记录" + yzsj.Replace(":", "-") + ".htm"; //设置要保存的网页的名称，加上时间信息 string json = hr.DataTableToJsonWithJsonNet(Dt); //把DataTable转换成JSON格式 string text = System.IO.File.ReadAllText("template.htm"); //读取模版网页 text = text.Replace("|", json); //把模版中|替换成真实的数据 text = text.Replace("标题", "服务器巡检记录，生成于："+DateTime.Now.ToString());//把模版中的标题替换成真实的标题 System.IO.File.WriteAllText(FileName, text); //保存生成的网页 MessageBox.Show("服务器巡检记录已保存，请转至软件Data目录下查看！", "服务器巡检提醒", MessageBoxButtons.OK, MessageBoxIcon.Information);
最后的效果如下图，表格还可以排序
原文：https://www.cnblogs.com/wjbych/p/14092053.html