纯JS集成报表系列教程5-Web端在线设计器集成

头像
LanLan_Guo
    阅读 8 分钟
    1

    ActiveReportsJS拥有桌面端设计器和Web段在线设计器，现在我们来说说如何在纯 JavaScript 应用中集成前端报表设计器。

    1、创建纯JS代码应用

    示例代码如下：

    `<!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="utf-8" />

<title>ARJS Report designer</title>

<meta name="description" content="ARJS Report designer" />

<meta name="author" content="GrapeCity" />

    </head>

    <body></body>

    </html>
    `

    2、安装 ActiveReportsJS

    可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式，最简单的方法是通过在head标签直接引用CDN 的链接。

    `<link

    rel="stylesheet"

    href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"

    type="text/css"

    />

    <link

    rel="stylesheet"

    href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css"

    type="text/css"

    />

    <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>

    <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script>`

    3、添加报表设计器的宿主元素

    在body 标签中添加 div 元素。

    <div id="designer-host"></div>

    在 head 标签中添加designer-host 元素

    `<style>

    #designer-host {

    margin: 0 auto;

width: 100%;

height: 100vh;

    }

    </style>`

    4、添加 ActiveReportsJS 报表

    ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的根目录下，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。
    `
    {

    "Name": "Report",

    "Body": {

    "ReportItems": [

  {

    "Type": "textbox",

    "Name": "TextBox1",

    "Value": "Hello, ActiveReportsJS Viewer",

    "Style": {

      "FontSize": "18pt"

    },

    "Width": "8.5in",

    "Height": "0.5in"

  }

]

    }

    }`

    5、初始化设计器

    在body 标签中 designer-host 元素后添加script 标签

    `<script>

    var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");

    designer.setReport({id: "report.rdlx", displayName: "my report"});

    </script>
    `

    6、预览展示

    7、Web端报表设计器添加预览、保存功能

    `<!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>ActiveReportsJS sample</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<script src="/dist/ie-polyfills.js"></script>

<script src="/dist/ar-js-core.js"></script>

<script src="/dist/ar-js-designer.js"></script>

<script src="/dist/ar-js-viewer.js"></script>

<script src="/dist/ar-js-pdf.js"></script>

<script src="/dist/designer/zh-locale.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"

      rel="stylesheet" />

<link rel="stylesheet"

      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"

      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"

      crossorigin="anonymous" />

<link rel="stylesheet"

      type="text/css"

      href="/styles/ar-js-ui.css" />

<link rel="stylesheet"

      type="text/css"

      href="/styles/ar-js-viewer.css" />

<link rel="stylesheet"

      type="text/css"

      href="/styles/ar-js-designer.css" />

<style>

    #designer-host, #viewer-host {

        margin: 0 auto;

        width: 100%;

        height: 500px;

    }

</style>

    </head>

    <body>

    <div id="designer-toolbar" class="container-fluid">

    <div class="row mt-3 mb-3">

        <button id="btnPdfPreview"

                type="button"

                class="btn btn-primary btn-sm col-sm-2 ml-1"

                onclick="onPdfPreview()">

            PDF 预览

        </button>

        <button id="btnDesignerOpen"

                type="button"

                class="btn btn-primary btn-sm col-sm-2 ml-1"

                onclick="onOpenDesigner()">

            打开设计器

        </button>

    </div>

</div>

<div id="designer-host"></div>

<div id="viewer-host"></div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

          crossorigin="anonymous"></script>

<script>

     function onOpenDesigner() {

          $('#viewer-host, #btnDesignerOpen').hide();

          $('#designer-host, #btnPdfPreview').show();

      }

    async function onPdfPreview() {         

          const reportInfo = await this.designer.getReport();

          const report = new GC.ActiveReports.Core.PageReport()

          await report.load(reportInfo?.definition);

          const doc = await report.run();

          const result = await GC.ActiveReports.PdfExport.exportDocument(doc);

          result.download("exportedreport.pdf");

      }

    var reportTemplates = GC.ActiveReports.ReportDesigner.templates;

    var resolveFunc = null;

    var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host", { language: "zh" });

    var counter = 0;

    reportStorage = new Map();

    function fillReportList() {

        $('#listReports').empty();

        let reportIds = reportStorage.keys();

        let result = reportIds.next();

        while (!result.done) {

            const reportId = result.value;

            const openReportBtn = $('<button type="button" class="list-group-item list-group-item-action">' + reportId + '</button>');

            openReportBtn.on('click', function () {

                onSelectReport(reportId);

            })

            $('#listReports').append(openReportBtn);

            result = reportIds.next();

        }

    }    

    designer.setActionHandlers({

        onRender: (report) => {

              $('#viewer-host, #btnDesignerOpen').show();

              $('#designer-host, #btnPdfPreview').hide();

              viewer.open(report.definition);

              return Promise.resolve();

          },

        onCreate: function () {

            const reportId = `NewReport${++this.counter}`;

            return Promise.resolve({ definition: reportTemplates.CPL, id: reportId, displayName: reportId });

        },

        onOpen: function () {

            const ret = new Promise(function (resolve) {

                resolveFunc = resolve;

                fillReportList();

                $("#dlgOpen").modal("show");

            });

            return ret;

        },

        onSave: function (info) {

            const reportId = info.id || `NewReport${++this.counter}`;

            reportStorage.set(reportId, info.definition);

            return Promise.resolve({ displayName: reportId });

        },

        onSaveAs: function (info) {

            const reportId = `NewReport${++this.counter}`;

            alert(reportId);

            reportStorage.set(reportId, info.definition);

            return Promise.resolve({ id: reportId, displayName: reportId });

        }

    });

    designer.setReport({ id: 'reports/111.rdlx-json' });

      var viewer = new ActiveReports.Viewer('#viewer-host', { language: "zh" });

      $('#viewer-host, #btnDesignerOpen').hide();

    function onSelectReport(reportId) {

        if (resolveFunc) {

            $("#dlgOpen").modal("hide");

            resolveFunc({ definition: reportStorage.get(reportId), id: reportId, displayName: reportId });

            resolveFunc = null;

        }

    }

</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

        crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"

        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"

        crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"

        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"

        crossorigin="anonymous"></script>

<div class="modal" id="dlgOpen" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">

                    打开报表

                </h5>

                <button type="button"

                        class="close"

                        data-dismiss="modal"

                        aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <h2>请选择报表：</h2>

                <div class="list-group" id="listReports">

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">

                    关闭

                </button>

            </div>

        </div>

    </div>

</div>

    </body>

    </html>
    `
    8、预览结果

    image.png

    javascript前端vue.jshtml5
    LanLan_Guo
    14 声望4 粉丝

    研究报表已经7年有余，略懂一二。期望能够成为报表专家，为大家能够提供报表咨询服务。

    « 上一篇
    纯JS集成报表系列教程4
    下一篇 »
    纯JS集成报表系列教程6-Web端在线设计器如何内置好数据

    引用和评论

    推荐阅读
    头像
    纯JS集成报表系列教程7-样式自定义

    LanLan_Guo阅读 1.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新