纯JS集成报表系列教程7-样式自定义

头像
LanLan_Guo
    阅读 7 分钟

    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、预览展示

    csshtmlhtml5
    LanLan_Guo
    14 声望4 粉丝

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

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

    引用和评论

    推荐阅读
    头像
    腾讯新闻中心首页改版啦

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

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    0 条评论
    得票最新