关于css:纯JS集成报表系列教程7样式自定义

40次阅读

共计 5459 个字符，预计需要花费 14 分钟才能阅读完成。

ActivereportsJS 是纯前端的报表控件，能够跟任何 web 我的项目我的项目进行集成，集成的时候就会存在款式主题 UI 不统一的状况，这时候就须要通过调整 CSS 或者其余形式实现款式对立。ActivereportsJS 提供一个主题编辑器的能力，能够轻松实现 UI 款式的匹配。

上面我就带大家一起入手操作下

1、首先，关上主题编辑器：Theme Generator

2、进行主题色彩的设置，能够自定义设置主题色彩，字体大小、字体类型

3、预览看是不期待的后果，而后点击下载对应的 CSS 文件

4、下载后的 CSS 文件间接集成到报表我的项目中

<link

  rel="stylesheet"

  type="text/css"

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

/>

<link

  rel="stylesheet"

  type="text/css"

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

/>

<link

  rel="stylesheet"

  type="text/css"

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

/>

5、全副代码

<!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/locales/ar-js-locales.js"></script>

<!-- 设计器汉化   -->

<script src="dist/locales/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-theme/ar-js-ui.css"

/>

<link

  rel="stylesheet"

  type="text/css"

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

/>

<link

  rel="stylesheet"

  type="text/css"

  href="styles/ar-js-theme/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 counter = 0;

  reportStorage = new Map();

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

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

  };

  function onSelectReport(reportId){if(resolveFunc){$("#dlgOpen").modal("hide");

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

      resolveFunc = null;

    }

  };

    

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

            reportStorage.set(reportId, info.definition);

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

        }

    });

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

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

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

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

6、预览展现

正文完
css
发表至： css
2021-11-26
 0
关于css:Css基础知识点总结
css基础知识对规则的补充
关于css:Loading-制作方案
从一个现象出发理解CSS层叠上下文