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

ActivereportsJS是纯前端的报表控件,可以跟任何web项目项目进行集成,集成的时候就会存在样式主题UI不一致的情况,这时候就需要通过调整CSS或者其他方式实现样式统一。ActivereportsJS提供一个主题编辑器的能力,可以轻松实现UI样式的匹配。

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

1、首先,打开主题编辑器:Theme Generator

2、进行主题颜色的设置,可以自定义设置主题颜色,字体大小、字体类型

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

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

  rel="stylesheet"

  type="text/css"

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

/>




5、全部代码





ActiveReportsJS sample



















 












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

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

crossorigin="anonymous"

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

integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"

crossorigin="anonymous"

6、预览展示

你可能感兴趣的