纯JS集成报表系列教程2

最新推荐文章于 2021-11-16 10:13:17 发布
置顶 最新推荐文章于 2021-11-16 10:13:17 发布
阅读量1.4k 收藏 1
点赞数 1
文章标签： javascript visual studio code json html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21779101/article/details/121349750
版权
本文介绍了如何使用ActiveReportsJS的API来添加自定义导出按钮，包括导出Excel、PDF和Html的功能。教程详细讲解了每个步骤，从添加按钮到实现各种格式的导出，并提供了预览展示和demo示例。
摘要由CSDN通过智能技术生成

添加导出按钮

ActiveReportsJS提供导出API，在实际的业务场景中，可以根据自己的需求进行自定义导出。

下面我们就来看看如何自定义添加导出按钮

1、ActiveReportsJS添加按钮API

viewer.toolbar.addItem();

2、导出API

 导出Excel

function runExcel() {

           var ARJS = GC.ActiveReports.Core;

           var Excel = GC.ActiveReports.XlsxExport;

           var settings = {

               sheetName: '快递单',

               pageSettings: {

                   size:'A4',

                   orientation: 'portrait'

               }

           }

           var pageReport = new ARJS.PageReport();

           pageReport.load('Quotation.rdlx-json')

               .then(function() { return pageReport.run() })

               .then(function(pageDocument) { return Excel.exportDocument(pageDocument, settings) })

               .then(function(result) { result.download('arjs-excel') });

       }

导出PDF

function runPdf() {

            var ARJS = GC.ActiveReports.Core;

            var PDF = GC.ActiveReports.PdfExport;

            var settings = {

                info: {

                    title: '快递单',

                    author: 'GrapeCity inc.',

                },

                pdfVersion:"1.7"

            }

            var pageReport = new ARJS.PageReport();

            pageReport.load('Quotation.rdlx-json')

                .then(function() { return pageReport.run() })

                .then(function(pageDocument) { return PDF.exportDocument(pageDocument, settings) })

                .then(function(result) { result.download('arjs-pdf') });

        }

导出Html

function runHtml(){  

            var ARJS = GC.ActiveReports.Core;

            var html= GC.ActiveReports.HtmlExport;

            var pageReport = new ARJS.PageReport();

            pageReport.load('reports/MonthSurvey.rdlx-json')

                .then(function() { return pageReport.run() })

                .then(function(pageDocument) { return html.exportDocument(pag
最低0.47元/天 解锁文章
qq_21779101
关注
纯JS集成报表系列教程7
qq_21779101的博客
11-25 653
纯JS界面用户可以根据自己需求引用主题编辑器进行整体UI样式的调整
纯JS集成报表系列教程6
qq_21779101的博客
11-16 1508
Web端在线设计器如何内置好数据 ActivereportsJs提供web端在线设计器，使用者可以根据通过web设计器进行数据源数据集的绑定，然后使用设计器的设计界面进行报表的设计。 在实际业务场景中，有这样一种场景：web报表设计器集成到项目中，并且面向的对象是业务人员，业务人员可能对数据库操作这块不是很熟悉，他们只需要关注自己的报表需求，在设计器进行拖拽设计报表。那么就需要在web端在线设计器中内置好数据源数据集，这样让业务人员能够只关注业务逻辑，设计出满足自己需求的报表。 Activerepor
润乾报表与 ActiveReport JS 功能对比
chaochao52001的博客
02-03 187
简介 润乾报表是用于报表制作的大型企业级报表软件，核心特点在于开创性地提出了非线性报表数学模型，采用了革命性的多源关联分片、不规则分组、自由格间运算、行列对称等技术，使得复杂报表的设计简单化，以往难以实现的报表可以轻松实现，避免了大量的复杂 SQL 编写与前期数据准备，报表设计的效率提高了一个数量级。润乾报表大概有 20 年的历史，产品成熟稳定。 ActiveReport JS 是一个轻量级的...
activereportsjs-2.2预览版.zip
11-15
纯前端的报表工具，能够跟Vue、Angular、React直接集成，提供web端的在线报表设计器可以在线进行报表的创建和编辑
对作用域插槽的理解：slot-scope
weixin_42349568的博客
09-20 1279
一，先来看看普通的组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 20%; marg
纯JS集成报表系列教程1
qq_21779101的博客
11-16 720
Viewer集成 ActiveReportsJS是一款纯前端的报表控件，不仅可以在前端框架Vue、Angular、React中直接集成使用，还可以在纯 JavaScript 应用。 下面就一起来创建让ActiveReportsJS在纯JavaScript 应用 1、使用任意工具创建 HTML页面。 您可在任何文本编辑器中创建 HTML页面。 输入以下代码： <!DOCTYPE html> <html lang="en"> <head> ..
纯JS集成报表系列教程5
qq_21779101的博客
11-16 343
Web端在线设计器集成 ActiveReportsJS拥有桌面端设计器和Web段在线设计器，现在我们来说说如何在纯 JavaScript 应用中集成前端报表设计器。 1、创建纯JS代码应用 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>ARJS Re...
实战：在Node.js和Vue.js中构建文件压缩应用程序
程序员成长指北
01-26 286
作者：晨曦原文：https://mp.weixin.qq.com/s/zwmYlKE2ZTo0IftyTqlA7QNode.js为我们提供了一个模块来协助文件压缩。在本文中，我们将构建一...
报表key激活码
07-06
fine report key
js实现图形报表 ECharts插件
晓雪博客
03-29 5960
ECharts是一个很强大的插件 可以实现很多强大的图形报表功能下图是部分官方实例 使用方法也是非常简单首先打开插件的官方网站http://echarts.baidu.com/echarts2/doc/example.html可以看到顶上有一个文档 点开里面的观测手册可以看到里面的使用方法 一下简单的试列首先我下载的是echarts-2.2.7版本解压之后得到一个echarts-2.2.7文件夹下...
ActiveReports 报表控件官方中文入门教程 (1)-安装、激活以及产品资源
weixin_30642029的博客
11-04 188
本系列文章主要是面向初次接触 ActiveReports 产品的用户，可以帮助您在三天之内轻松的掌握ActiveReports控件的基本使用方法，包括安装、激活、创建报表、绑定数据源以及发布等内容。本篇文章我们就从安装产品开始带您开启轻松的 ActiveReports 体验之旅。 系列文章列表： ActiveReports 报表控件官方中文入门教程 (2)-创建、数据源、浏览以及发布 Act...
signature=66b88eb63dc720d781ea23d69b9d77b4,\\uc2a4\\ud2b8\\ub9ac\\ud0b9 \\ud604\\uc0c1\\uc744 \\uac1...
weixin_42502366的博客
05-29 995
摘要：- . , . . , . Middlebury 6.33% 29 . .The dynamic programming based methods, a kind of globally optimizing stereo matching methods, has...
html、css、js的渲染加载
Samsam的博客
01-17 556
html、css、js的渲染加载 理论过程 https://blog.csdn.net/qq_41807645/article/details/80839757?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachine
织梦dedecms插件开发实例
用行动祈祷比用言语更能够使上帝了解
11-20 7576
今天制作了一个简单的dedecms用户留言插件，先分享出来，后续可能会发博文总结各种织梦插件制作方法和原理。 插件开发步骤：1、制作程序文件和建立所需用到的表  2、使用模块生成向导生成插件XML 3、安装使用。 下面以我制作的简单用户留言插件为例，演示如下： 一、实现的功能 这个例子实现的功能很简单，只是用来演示插件制作的原理，我们弄清楚原理后，就可以写代码实现其他各种功能。 前台页面
介绍一款强大牛比的js报表项目 highcharts
老李 技术 专栏
05-06 1992
<br />有一个很棘手的项目那就是报表统计方面的项目，以前都是做数据的显示统计很少用到图形化的东西，以前要不就是用控件，可是显示的也不是很好看，还是用js完成吧，还是上网找找吧。<br /> <br />牛比的highcharts，这个js报表框架相当的给力，不仅颜色很好看，报表的显示形式也很多，柱状体、饼图、曲线图有很多，还可以缩放，导出成图片和打印。<br />如图：<br /> <br /><br /> <br />2.<br /> <br />3.<br /><br /> <br />4.<br
纯CSS表情符号星级评分小部件
前端仙人的博客
12-27 485
今天，在此博客中，你将学习如何仅使用HTML和CSS创建Emoji 评分系统。在下一篇文章中，我会分享如何在JavaScript中创建“自定义Emoji滑动验证”。 你可能知道，星级评定是一个评分问题或小部件，可为人们提供应用程序，产品，服务或其他获得好评的评分。星星数范围可以从5到10星。在此设计中[Emoji 评级]，有一个白色的大盒子，上面放着表情符号，星星和等级编号。当你对特定星星进行评分时，表情符号会根据你的评分而变化，底部文字和评分编号也会更改。 以下是源代码： html <!DOCTY
WPF 精修篇 page
时意
11-28 1087
前言 前段时间看UML 大象 这本书 虽然马上看到了精华片 最后还是暂时暂停 因为这本书 很好 但是暂时对现在的我来说 有点超前 很多东西理解起来还是很难 但是 这本书 我会在俩个月以后继续看 因为要入职新公司 所以 需要对WPF 和设计模式 达到一定水平 设计模式已经整理出来9个模式 后期还会继续跟进 模式在上UML 不冲突 打算用14天左右 打算充分整理WPF 和MVVM 来拥抱...
百灵报表集成指南：Web2.0 JS API 教程
根据不同的部署环境，如Actuate Information Console、Actuate Java Component、Actuate iServer Express或Actuate iServer，都可以利用JS API集成报表。 集成的第一步是在Web页面中引入API库。在HTML代码中，通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值