在Bootstrap開發框架中使用Grid++報表

時間  2019-11-05
標籤 bootstrap 開發 框架 使用 grid 報表 欄目 Bootstarp 简体版
原文   原文鏈接

以前在隨筆《在Winform開發中使用Grid++報表》介紹了在Winform環境中使用Grid++報表控件，本篇隨筆介紹在Bootstrap開發框架中使用Grid++報表，也就是Web環境中使用Grid++報表，對於我上篇提到的二維碼條形碼的資產信息表，我係統經過Web方式進行呈現，或者展現其報表的PDF也能夠，本篇隨筆一步步介紹如何使用Web報表的展現出來。javascript

一、Grid++報表在Web端的處理

Grid++在Web端，提供了插件的方式展現，不過因爲插件是採用COM方式處理的，這種模式限制了它支持瀏覽器有限。html

經過上面表格，也就是說基本上咱們應用比較普遍的Chrome和FireFox最新的都不支持了，因爲我項目需求，我但願客戶可以在不一樣的瀏覽器上實現報表的展現，那這種插件方式顯示的方式就不太適合了。前端

不過Grid++報表仍是提供了另一種方式，也就是HTML5的方式展現，HTML5報表運行在全部支持HTML5的瀏覽器(目前較新版本的各類瀏覽器都支持HTML5)。html5

例如在Chrome瀏覽器裏面展現HTML報表，效果以下所示。java

這種方式仍是挺棒的，不過我在作二維碼打印的時候，發現和我設計的報表不太同樣，我設計的報表樣式效果以下所示。jquery

而HTML報表給個人效果是以下所示。web

也就是沒能按我所須要的排列來展現，所以我但願在服務端生成PDF格式展現，由於PDF的效果仍是最好的，不會變形，並且我能夠經過PDFJS的插件實如今線預覽效果，須要的時候，下載PDF打印內容便可。ajax

 

二、Grid++報表在Web端的實現過程

前面介紹了我須要的報表效果和具體選型過程，在得出最終結果前，咱們來一步步看看具體的實現效果。json

對於一些簡單的二維表，若是使用直接報表展現的方式仍是很棒的，下面咱們先來介紹經過HTML報表直接呈現的方式實現過程。bootstrap

因爲我這個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/javascript"></script>
    <script src="~/Content/metronic/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="~/Content/metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

    <!--Grid++報表須要的JS文件-->
    <script src="~/Content/JQueryTools/GridReport/grhtml5-6.6-min.js"></script>

這樣咱們調用報表對象進行數據的處理便可，以下面咱們測試一個案例的報表內容處理。

    <script language="javascript" type="text/javascript">
        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";
            //建立報表顯示器，參數指定其在網頁中的佔位標籤的ID，報表模板URL與報表數據URL不指定，而是在後面的AJAX操做中提供相關數據
            var reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder");
            reportViewer.reportPrepared = false; //指定報表生成須要加載報表模板
            reportViewer.dataPrepared = false;   //指定報表生成須要加載報表數據

            //報表在模板與數據都載入後會自動生成
            //正式報表
            $.ajax({
                type: "GET",
                url: "/Report/barcode.grf",
                data: "",
                success: function (msg) {
                    reportViewer.loadReport(msg);
                }
            });
            $.ajax({
                type: "GET",
                //url: "/Report/jsonbarcode.txt", //json文件格式
                url: "/Asset/GetRepotData?ids=" + ids,//動態json格式
                data: "",
                success: function (msg) {
                    reportViewer.loadData(msg);
                }
            });
        };

我經過 Asset / GetRepotData 的方法實現數據的動態生成。

        /// <summary>
        /// 獲取Grid++的JSON格式報表數據
        /// </summary>
        /// <returns></returns>
        public ActionResult GetRepotData(string ids)
        {
            ActionResult result = Content("");
            if (!string.IsNullOrEmpty(ids))
            {
                var list = BLLFactory<Asset>.Instance.FindByIDs(ids);
                //構建一個合法格式的對象，進行序列號
                var table = new
                {
                    Table = list
                };
                result = ToJsonContent(table);
            }
            return result;
        }

其實就是構建一個頂級節點的Table對象，而後序列化爲JSON便可。

這樣咱們就能夠輸出所須要的報表了，以下所示。

 不過這樣的報表，沒有按照我須要的兩列排列（估計也是報表的一個Bug吧），沒有達到個人指望，所以我但願經過展現PDF的方式，實現嚴格格式的輸出報表。

三、Grid++報表在Web端的PDF處理

報表控件，後臺經過PDF的生成方式，我在以前那篇隨筆《在Winform開發中使用Grid++報表》介紹了若是在Winform下直接導出PDF方式，具體以下所示。

        private void btnExportPdf_Click(object sender, EventArgs e)
        {
            List<ProductInfo> list = BLLFactory<Product>.Instance.GetAll();

            //從對應文件中載入報表模板數據
            string reportPath = Path.Combine(Application.StartupPath, "Reports\\testList.grf");
            GridExportHelper helper = new GridExportHelper(reportPath);

            string fileName = "d:\\my.pdf";
            var succeeded = helper.ExportPdf(list, fileName);
            if(succeeded)
            {
                Process.Start(fileName);
            }
        }

而其中輔助類的ExportPdf方法就是直接利用報表客戶端控件對象導出PDF的，以下代碼所示。

        /// <summary>
        /// 導出PDF，並返回路徑
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="list"></param>
        /// <returns></returns>
        public bool ExportPdf<T>(List<T> list, string filePath)
        {
            //從對應文件中載入報表模板數據
            Report.LoadFromFile(this.ReportPath);
            Report.FetchRecord += () =>
            {
                FillRecordToReport<T>(Report, list);
            };
            Report.ExportBegin += (IGRExportOption option) =>
            {
                option.AbortOpenFile = true;  //導出後不用關聯程序打開導出文件，如導出Excel文件以後不用Excel打開
                option.FileName = filePath;
                switch (option.ExportType)
                {
                    case GRExportType.gretPDF:
                        option.AsE2PDFOption.Author = "My Author";
                        option.AsE2PDFOption.Subject = "My Subject";
                        break;
                }
            };

            var succeeded = Report.ExportDirect(GRExportType.gretPDF, filePath, false, false);
            return succeeded;
        }

報表導出的效果和報表預覽效果一致

不過我使用前面報表客戶端的對象處理報表導出，在測試後臺生成PDF的時候，提示內存損壞，應該就是COM處理的問題，不支持這樣的方式，諮詢做者後說須要使用 WEB報表服務器 方式來生成PDF。

改變一下處理過程，實際使用的是GridppReportServer對象來處理，實際代碼以下所示。

        /// <summary>
        /// 導出PDF
        /// </summary>
        /// <typeparam name="T">列表對象類型</typeparam>
        /// <param name="list">列表對象</param>
        /// <param name="filePath">存儲路徑</param>
        /// <param name="context"></param>
        /// <returns></returns>
        public bool ExportPdf<T>(List<T> list, string filePath, HttpContextBase context)
        {
            //從對應文件中載入報表模板數據
            Report.LoadFromFile(this.ReportPath);

            //構建一個合法格式的對象，進行序列化
            var table = new
            {
                Table = list
            };
            var json = JsonConvert.SerializeObject(table, Formatting.Indented);
            Report.LoadDataFromXML(json);

            IGRExportOption ExportOption = Report.PrepareExport(GRExportType.gretPDF);
            var exportPdf = Report.ExportToBinaryObject();
            Report.UnprepareExport();

            var succeeded = exportPdf.SaveToFile(filePath);
            return succeeded;
        }

有了這個輔助方法，咱們就能夠封裝一下處理得到數據，並導出PDF文件的操做了

        /// <summary>
        /// 根據選中的ID記錄，生成對應的PDF報表，返回路徑
        /// </summary>
        /// <param name="ids">選中的ID記錄，逗號分開</param>
        /// <returns></returns>
        public ActionResult ExportPdf(string ids)
        {
            ActionResult result = Content("");
            if (!string.IsNullOrEmpty(ids))
            {
                //利用接口獲取列表數據
                var list = BLLFactory<Asset>.Instance.FindByIDs(ids);
                //報表文件路徑
                string reportPath ="/Report/barcode.grf";
                //轉換爲物理路徑
                reportPath = Server.MapPath(reportPath);

                //導出PDF的文件路徑
                string exportPdfPath = string.Format("/GenerateFiles/{0}/AssetReport.pdf", CurrentUser.Name);
                //轉換爲物理路徑
                string realPath = Server.MapPath(exportPdfPath);
                //確保目錄生成
                string parentPath = Directory.GetParent(realPath).FullName;
                DirectoryUtil.AssertDirExist(parentPath);

                //生成PDF報表文檔到具體文件
                GridExportHelper helper = new GridExportHelper(reportPath);
                bool success = helper.ExportPdf(list, realPath, HttpContext);
                if(success)
                {
                    result = Content(exportPdfPath);//返回Web相對路徑
                }
                helper.Dispose();//銷燬對象
            }
            return result;
        }

這些是後端的代碼，要想在前端裏面處理並預覽PDF文件，須要加入前端的HTML代碼

以下咱們加入兩個JS函數

        //查看明細信息
        function ViewPDF(ids) {
            $.ajax({
                type: "GET",
                url: "/Asset/ExportPdf?ids=" + ids,
                data: "",
                success: function (filePath) {
                    var baseUrl = "/Content/JQueryTools/pdfjs/web/viewer.html";
                    var url = baseUrl + "?file=" + filePath;//實際地址
                    window.open(url);
                }
            });
        };

        function AssetPrint() {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length == 0) {
                showTips("請選擇你要打印編碼的記錄");
                return;
            }

            //使用Grid++報表，構建數據顯示
            var ids = '';
            for (var i = 0; i < rows.length; i++) {
                ids += rows[i].ID + ',';
            }
            ids = ids.substring(0, ids.length - 1);

            //loadReport(ids);
            ViewPDF(ids);
        }

這裏利用了PDFJS的插件來在線展現生成的PDF，須要瞭解具體能夠參考我以前的隨筆《實如今線預覽PDF的幾種解決方案》

而後在HTML頁面裏面加入對應的處理按鈕便可。

<button type="button" onclick="AssetPrint()" class="btn btn-circle btn-sm red">
    <i class="fa fa-plus"></i>
    資產編碼打印
</button>

以下頁面的界面效果所示

單擊【資產編碼打印】，首先在後臺動態生成一個PDF文件，成功後前端彈出一個新的預覽PDF界面，預覽咱們的二維碼報表，效果比HTML5界面效果標準，和咱們原來的設計報表初衷一直，兩列排列。

 以上就是我在實際項目中，在Bootstrap開發框架中使用Grid++報表的幾個處理過程，但願對你使用有幫助，報表確實具備很好的應用場景，使用起來仍是很方便的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程