之前在随笔《在Winform开发中使用Grid++报表》介绍了在Winform环境中使用Grid++报表控件，本篇随笔介绍在Bootstrap开发框架中使用Grid++报表，也就是Web环境中使用Grid++报表，对于我上篇提到的二维码条形码的资产信息表，我系统通过Web方式进行呈现，或者展示其报表的PDF也可以，本篇随笔一步步介绍如何使用Web报表的展示出来。
1、Grid++报表在Web端的处理
Grid++在Web端，提供了插件的方式展示，不过由于插件是采用COM方式处理的，这种模式限制了它支持浏览器有限。
通过上面表格，也就是说基本上我们应用比较广泛的Chrome和FireFox最新的都不支持了，由于我项目需求，我希望客户能够在不同的浏览器上实现报表的展示，那这种插件方式显示的方式就不太适合了。
不过Grid++报表还是提供了另外一种方式，也就是HTML5的方式展示，HTML5报表运行在所有支持HTML5的浏览器(目前较新版本的各种浏览器都支持HTML5)。
例如在Chrome浏览器里面展示HTML报表，效果如下所示。
这种方式还是挺棒的，不过我在做二维码打印的时候，发现和我设计的报表不太一样，我设计的报表样式效果如下所示。
而HTML报表给我的效果是如下所示。
也就是没能按我所需要的排列来展示，因此我希望在服务端生成PDF格式展示，因为PDF的效果还是最好的，不会变形，而且我可以通过PDFJS的插件实现在线预览效果，需要的时候，下载PDF打印内容即可。
2、Grid++报表在Web端的实现过程
前面介绍了我需要的报表效果和具体选型过程，在得出最终结果前，我们来一步步看看具体的实现效果。
对于一些简单的二维表，如果使用直接报表展示的方式还是很棒的，下面我们先来介绍通过HTML报表直接呈现的方式实现过程。
由于我这个Bootstrap开发框架是采用MVC开发的，我想把报表的展示放在Report.cshtml视图里面，那么我需要创建一个视图Action，如下所示。
public ActionResult Report() { return View("Report"); }
这样，我们再创建一个Report.cshtml视图页面，如下所示。首先引入我们需要的JS，一般来说，引入grhtml5-6.6-min.js文件就可以了，由于我们需要使用Jquery的一些处理方式，因此JQueryJS也需要引入的。
@*此处添加一些Jquery相关的脚本，方便开发时刻自定义脚本的智能提示*@ <script src="~/Content/metronic/assets/global/plugins/jquery.min.js" type="text/java script"></script> <script src="~/Content/metronic/assets/global/plugins/jquery-migrate.min.js" type="text/java script"></script> <script src="~/Content/metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/java script"></script> <!--Grid++报表需要的JS文件--> <script src="~/Content/JQueryTools/GridReport/grhtml5-6.6-min.js"></script>
这样我们调用报表对象进行数据的处理即可，如下面我们测试一个案例的报表内容处理。
<script language="java script" type="text/java script"> function loadReport() { rubylong.grhtml5.barcodeURL = "/Barcode.ashx"; //创建报表显示器，参数指定其在网页中的占位标签的ID，报表模板URL与报表数据URL不指定，而是在后面的AJAX操作中提供相关数据 var reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder"); reportViewer.reportPrepared = false; //指定报表生成需要加载报表模板 reportViewer.dataPrepared = false; //指定报表生成需要加载报表数据 //报表在模板与数据都载入后会自动生成 //测试报表 $.ajax({ type: "GET", url: "/Report/1a.SimpleList.grf", data: "", success: function (msg) { reportViewer.loadReport(msg); } }); $.ajax({ type: "GET", //url: "/Report/xmlCustomer.txt", //xml格式 url: "/Report/jsonCustomer.txt",//json格式 data: "", success: function (msg) { reportViewer.loadData(msg); } }); //页面初始化 $(function () { loadReport(); }); </script>
报表内容呈现在HTML元素里面，如下代码所示。
<body> <div id="report_holder"> </div> </body>
通过上面我们了解到它的报表内容的赋值处理，我们首先需要确定报表模板文件，以及动态生成报表呈现的数据，代替 jsonCustomer.txt 文件内容。
我们来看看这个文件的格式如下所示。
也就是我们如果需要动态生成数据，则构建这一个JSON格式输出即可。测试报表界面效果如下所示，二维表格展示效果还是很好的。
实际报表处理的时候，由于我需要动态展示数据，因此在JS接收一个参数，并根据参数动态构建数据即可。
如下是我实际的项目报表数据展示。
function loadReport(ids) { rubylong.grhtml5.barcodeURL = "/Barcode.ashx"; //创建