关于javascript:纯JS集成报表系列教程5Web端在线设计器集成

ActiveReportsJS领有桌面端设计器和Web段在线设计器，当初咱们来说说如何在纯 JavaScript 利用中集成前端报表设计器。

1、创立纯JS代码利用

示例代码如下：

`<!DOCTYPE html>

<head>

<meta charset="utf-8" /><title>ARJS Report designer</title><meta name="description" content="ARJS Report designer" /><meta name="author" content="GrapeCity" />

</head>

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

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>

<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、预览后果