锐客网

  1. 首页 > it技术 > >

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

ActivereportsJS是纯前端的报表控件，可以跟任何web项目项目进行集成，集成的时候就会存在样式主题UI不一致的情况，这时候就需要通过调整CSS或者其他方式实现样式统一。ActivereportsJS提供一个主题编辑器的能力，可以轻松实现UI样式的匹配。
【纯JS集成报表系列教程7-样式自定义】下面我就带大家一起动手操作下
1、首先，打开主题编辑器：Theme Generator
2、进行主题颜色的设置，可以自定义设置主题颜色，字体大小、字体类型
3、预览看是不期待的结果，然后点击下载对应的CSS文件
4、下载后的CSS文件直接集成到报表项目中

rel="stylesheet"type="text/css"href="https://www.it610.com/article/styles/ar-js-theme/ar-js-ui.css"/>

5、全部代码



ActiveReportsJS sample - 锐客网 #designer-host, #viewer-host {margin: 0 auto; width: 100%; height: 500px; }



PDF 预览打开设计器


打开报表× 请选择报表：




6、预览展示

    推荐阅读


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

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