C#中DataGridView中数据导出为网页的问题

在对服务器进行巡检后，我们需要保存一份巡检的日志下来，虽然可以通过sprie.xls第三方控件保存为excel，但是感觉还是直接生成网页更加方便。这里使用到了VUE2+elementUI的单页面。

1、生成网页的问题

对于生成网页的问题，网上看到一个例子，是直接在代码中拼页面，感觉太累还不好修改，如下

        /// <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;

        }

其实我们可以先做一个网页模板，然后替换掉里面的数据就可以了，这样子换模版方便，也容易修改网页的布局。

2、制作一个模版网页，做为导出时网页的样子

在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>

3、对网页模版进行替换并保存

        /// <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);

 最后的效果如下图，表格还可以排序

 

 

 

posted @ 2020-12-06 10:13  wjbych  阅读(232)  评论(0)    收藏  举报