Une brève discussion sur la façon d'utiliser les rapports Grid++ dans Bootstrap

Cet article vous présentera comment utiliser les rapports Grid++ dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Cet essai présente l'utilisation des rapports Grid++ dans le cadre de développement Bootstrap, c'est-à-dire l'utilisation des rapports Grid++ dans l'environnement Web pour les actifs de codes-barres QR que j'ai mentionnés. dans l'article précédent Le tableau d'informations est présenté par notre système via le Web, ou le PDF du rapport peut également être affiché. Cet article présente étape par étape comment afficher le rapport à l'aide du Web.

1. Traitement du rapport Grid++ côté Web

Grid++ fournit un affichage du plug-in côté Web. Cependant, puisque le plug-in est traité dans COM, ce Le mode est limité par les navigateurs qu'il prend en charge.

À travers le tableau ci-dessus, cela signifie que fondamentalement, les dernières versions de Chrome et FireFox, que nous utilisons largement, ne sont pas prises en charge en raison des besoins de mon projet. , J'espère que les clients pourront Si le rapport est affiché sur un navigateur, cette méthode d'affichage du plug-in ne convient pas.

[Recommandation associée : "Tutoriel bootstrap"]

Cependant, les rapports Grid++ offrent toujours un autre moyen, c'est-à-dire que les rapports HTML5 s'exécutent sur tous les navigateurs prenant en charge. HTML5 (actuellement les versions les plus récentes de divers navigateurs prennent en charge HTML5).

Par exemple, lors de l'affichage d'un rapport HTML dans le navigateur Chrome, l'effet est le suivant.

Cette méthode est assez bonne, mais lorsque j'imprimais le code QR, j'ai trouvé qu'il était différent du rapport que j'avais conçu. L'effet de style de rapport que j'ai conçu comme indiqué. ci-dessous.

L'effet du rapport HTML pour moi est le suivant.

C'est-à-dire qu'il ne peut pas être affiché dans l'arrangement dont j'ai besoin, j'espère donc générer un affichage au format PDF côté serveur, car l'effet du PDF est toujours le mieux, et ce ne sera pas une transformation, et je peux obtenir l'effet de prévisualisation en ligne via le plug-in PDFJS. Si nécessaire, téléchargez simplement le contenu d'impression PDF.

2. Le processus de mise en œuvre du rapport Grid++ sur le Web

J'ai présenté l'effet de rapport et le processus de sélection spécifique dont j'ai besoin avant d'obtenir le résultat final. Examinons étape par étape les résultats spécifiques de la mise en œuvre.

Pour certains tableaux bidimensionnels simples, il serait formidable d'utiliser la présentation directe par rapport. Présentons d'abord le processus de mise en œuvre de la présentation directe via des rapports HTML.

Étant donné que mon framework de développement Bootstrap est développé à l'aide de MVC, je souhaite placer l'affichage du rapport dans la vue Report.cshtml, puis je dois créer une vue Action, comme indiqué ci-dessous.

        public ActionResult Report()
        {
            return View("Report");
        }

De cette façon, nous créons une autre page d'affichage Report.cshtml, comme indiqué ci-dessous. Tout d'abord, introduisez le JS dont nous avons besoin. De manière générale, il suffit d'introduire le fichier grhtml5-6.6-min.js. Puisque nous devons utiliser certaines méthodes de traitement de Jquery, JQueryJS doit également être introduit.

@*此处添加一些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>

De cette façon, nous pouvons appeler l'objet rapport pour traiter les données. Par exemple, ci-dessous, nous testons le traitement du contenu du rapport d'un cas.

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

Le contenu du rapport est présenté dans l'élément HTML, comme indiqué dans le code suivant.

<body>
    <div id="report_holder">
    </div>
</body>

Grâce à ce qui précède, nous avons découvert le traitement d'affectation du contenu de son rapport. Nous devons d'abord déterminer le fichier de modèle de rapport et générer dynamiquement les données présentées dans le rapport pour remplacer le contenu du fichier jsonCustomer.txt. .

Jetons un coup d'œil au format de ce fichier comme indiqué ci-dessous.

Autrement dit, si nous avons besoin de générer dynamiquement des données, nous pouvons construire cette sortie au format JSON. L'effet de l'interface du rapport de test est le suivant, et l'effet d'affichage du tableau bidimensionnel est toujours très bon.

Pendant le traitement réel du rapport, puisque j'ai besoin d'afficher dynamiquement les données, j'ai juste besoin de recevoir un paramètre en JS et de construire dynamiquement les données en fonction du paramètre.

Ce qui suit est l'affichage réel des données de mon rapport de projet.

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

Je réalise une génération dynamique de données grâce à la méthode 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;
        }

En fait, il s'agit de construire un objet Table du nœud supérieur puis de le sérialiser en JSON.

De cette façon, nous pouvons générer le rapport requis, comme indiqué ci-dessous.

Cependant, ce rapport n'est pas disposé dans les deux colonnes dont j'ai besoin (c'est probablement un bug dans le rapport) et ne répond pas à mes attentes, j'espère donc afficher la méthode PDF pour obtenir des rapports de sortie au format strict.

3、Grid++报表在Web端的PDF处理

报表控件，后台通过PDF的生成方式，如果在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 + &#39;,&#39;;
            }
            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++报表的几个处理过程，希望对你使用有帮助，报表确实具有很好的应用场景，使用起来还是很方便的。

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!