纯JS集成报表系列教程5

最新推荐文章于 2024-05-15 09:36:40 发布
置顶 最新推荐文章于 2024-05-15 09:36:40 发布
阅读量326 收藏
点赞数 1
文章标签： javascript visual studio code json html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21779101/article/details/121349998
版权

Web端在线设计器集成

ActiveReportsJS拥有桌面端设计器和Web段在线设计器，现在我们来说说如何在纯 JavaScript 应用中集成前端报表设计器。

1、创建纯JS代码应用

示例代码如下：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <title>ARJS Report designer</title>

    <meta name="description" content="ARJS Report designer" />

    <meta name="author" content="GrapeCity" />

  </head>

  <body></body>

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

/>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script>

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

      
最低0.47元/天 解锁文章
qq_21779101
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯JS创建在线报表设计器
qq_21779101的博客
11-15 793
1、创建纯JS代码应用 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>ARJS Report designer</title> <meta name="description"content="ARJS Report ...
jsReport资料信息
08-26
关于jsReport的demo的具体例子
jsreport:基于javascript的业务报告平台
05-01
jsreport jsreport的官方发行一个用于设计和呈现各种报告的开源平台。 jsreport是一个报表服务器，开发人员可以使用javascript模板引擎（如jsrender或handlebars）定义报表。 它支持各种报告输出格式，例如html，pdf，excel和其他格式。 它还包括高级报告功能，例如用户管理，REST API，计划，设计器或发送电子邮件。 您可以在官方项目网站上找到更多信息。 安装 参见 npm install -g jsreport-cli jsreport初始化jsreport配置jsreport开始 要更改环境，请使用cmd set NODE_ENV=development或使用IDE提供的选项。 如果您未指定节点环境，则jsreport会将development假定为默认设置。 文献资料 有关概念，指南，客户和常规文档的概述，请参见 。 配置
探索 jsreport——强大的报告设计与渲染平台
最新发布
gitblog_00016的博客
05-15 474
探索 jsreport——强大的报告设计与渲染平台 项目地址:https://gitcode.com/jsreport/jsreport 1、项目介绍 jsreport 是一个开源的报告设计和渲染服务器，它利用 JavaScript 模板引擎如 Handlebars 来定义报告，支持多种输出格式，包括 HTML、PDF、Excel、Docx 和其他格式。这个平台提供了高级功能，如用户管理、REST...
比较全面的js report汇总
WDYDXF的专栏
07-20 3991
http://www.highcharts.com/demo/3d-scatter-draggable http://visjs.org/examples/graph3d/playground/index.html http://bl.ocks.org/supereggbert/aff58196188816576af0 https://github.com/mbostock/d3/wik
实现多个不同的JSReport导出文件
weixin_34217711的博客
08-31 183
代码实现那最基本的实现 没有重构也没有整理成方法 主要是自己记录下思路 说下思路要实现JSReport打包下载 1.需要将JSReport输出到文件中保存起来 2.将文件输出到zip流程中实现下载。 public void doGet（HttpServletRequest request, HttpServletResponse respon...
纯JS集成报表系列教程6
qq_21779101的博客
11-16 1461
Web端在线设计器如何内置好数据 ActivereportsJs提供web端在线设计器，使用者可以根据通过web设计器进行数据源数据集的绑定，然后使用设计器的设计界面进行报表的设计。 在实际业务场景中，有这样一种场景：web报表设计器集成到项目中，并且面向的对象是业务人员，业务人员可能对数据库操作这块不是很熟悉，他们只需要关注自己的报表需求，在设计器进行拖拽设计报表。那么就需要在web端在线设计器中内置好数据源数据集，这样让业务人员能够只关注业务逻辑，设计出满足自己需求的报表。 Activerepor
birt 报表 jsapi 集成教程
10-31
安讯从A10系列开始提供了新一代的Web2.0 JS API，它让用户仅需编写少量的JavaScript代码，就可以将百灵报表嵌入到自己的Web页面当中，同时还一起嵌入了百灵报表丰富的Web2.0特性，即强大的报表交互式查看功能。...
Highcharts js 图形报表
07-24
- **Highcharts JS**: 是一个基于JavaScript的开源图表库，使用SVG（ Scalable Vector Graphics）技术进行渲染，同时也支持老版本的IE浏览器通过VML进行渲染。 - **图形报表**: 指通过图表形式展示的数据报告，如...
表单设计器 纯js BS架构 绝对值这个分
02-15
可视化布局web 控件拖拽、表单自定义、自定义控件自己开发,本来想在这个基础上改版成Bootstrap 添加布局组件，思路有了技术不到家，分享给大家
JS Designer-开源
04-24
JS_Designer是一个轻量级的IDE，用于创建基于客户端的基于Web的应用程序（Javascript + PHP）。 目标是拥有一种工具来构建多语言，可换肤，外观​​专业的Web应用程序，就像您在VB或VC中所做的那样。
stimulsoft.designer.js去水印.7z
08-04
stimulsoft.designer.2020.3.2去水印 report.js 无水印版本 预览及设计无问题
jsreports:一个 JavaScript 报告库
06-06
JS报告 一个 JavaScript 报告库。 JSReports 模仿了两个优秀的开源项目： 和 JSReports 正在进行中。 以下是一些语法示例： JasperReport.jrxml -> jrxml2json() -> JasperReport.json var jsreports = require ( 'jsreports' ) ; var json = { ... } ; // JasperReport.json var data = { ... } ; // report data var report = new jsreports . Report ( json , options ) ; report . fill ( data ) ; report . export ( 'pdf' ) ; // or report.exportPDF(); repor
Python+Pyechart+PyCharm工具实现可视化报表实例
12-24
首先，Pyechart是一个用于生成ECharts图表的Python库，它是基于百度的ECharts JavaScript库构建的。ECharts是一个开源的、轻量级且功能强大的数据可视化库，可以生成交互式图表，适用于Web应用程序。通过Pyechart，...
fusionCharts报表
09-19
7. **报表组件**：除了基础图表，FusionCharts还提供了一系列报表组件，如仪表盘、表格、甘特图等，帮助用户构建完整的数据分析视图。 8. **性能优化**：FusionCharts注重性能优化，能够高效地渲染大量数据，确保...
WinCC OA官方中文视频教程（第二天）
10-31
5. **脚本编程**：WinCC OA支持VBScript和JavaScript，使得用户可以通过脚本来实现更复杂的逻辑控制。这部分可能会讲解基本的脚本语法和常见应用场景。 6. **数据记录与历史数据**：WinCC OA提供了数据记录和历史...
【报表设计器ActiveReportsJS（二）】第一个 ActiveReportsJS 报表设计器项目，本地化
coderYYY的博客
01-09 1452
ActiveReportsJS 设计器控件就会出现在页面中，可以做一些基本的控件添加，修改，数据绑定等操作来测试设计器的功能。以上的代码运行后，我们发现，它是英文的，这使用起来就不太方便了，我们这里可以对它进行一个本地化，转为中文。文件，添加代码如下，单文件组件 调用 Vue 报表设计器来加载上一步骤创建的报表模板。以上代码是初始化报表设计器示例，需要注意的是宿主元素ID 一定要可用。创建 Vue 应用的最简单的方法是使用Vue CLI。的新文件，并在该文件中插入以下JSON内容。或者使用yarn命令。
"Neusoft Co., Ltd. JavaScript 系列培训教程
本文是关于JavaScript系列培训教程的总结。本次培训由Neusoft Co., Ltd.的Beyond Technology部门举办，演讲人是丁海波。本次培训的目标是让学员能够熟练使用JavaScript语言对页面中的元素进行动态操作，并能对表单中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值