ActiveReports 13 新特性（2）——JS Viewer渲染报表

admin 发表于 2019-3-13 13:36:35

<div class="post-content new-post">
<h3 id="-">概述</h3>
ActiveReports 13现在提供基于JavaScript的一种全新的报表渲染方式——JS
Viewer，与原来的Html5 Viewer相比，JS Viewer 具有以下优点：
<ol>
<li>响应式网页设计</li>
<li>适应不同的屏幕尺寸</li>
<li>减少了对其它库的依赖（如jQuery等）</li>
<li>适用于现代Web端的应用框架：Asp.net MVC，Asp.net Core MVC
，HTML5和主要的JavaScript框架，如Angular 和 Vue.js</li>
</ol>
总结了这么多 JS Viewer 的优点，下面让我们一起来使用 JS
Viewer进行报表的渲染吧（文末提供 JS Viewer示例的源码下载）。
<h3 id="js-viewer-">JS Viewer 渲染报表的步骤</h3>
1、首先打开VS并且新建一个 Asp.net Web应用程序，同时 .Net Framework 版本选择
4.6.2
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/0998451afe715ad320fbcf2908ba64fc.png" alt="">
2、选择一个空的项目，然后点击确定
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/58df0c731409f74e133431894ff8d517.png" alt="">
3、在菜单栏中>>选择工具>>NuGet 包管理器>>程序包管理器控制台
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/03d542b754a1d942dc4f1db554598ef3.png" alt="">
4、在程序包管理器的控制台里输入如下的命令：
<pre class="hljs css"><code><code>install-package Microsoft.Owin.Host.SystemWeb –Pre
</code></code></pre>然后点击“Enter” 按钮，就会在引用中自动添加对应的引用
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/4a183c1e864c6b86dd6417ddad35718c.png" alt="">
5、在项目中，添加新建项，在新建项的选择栏中选择>>OWIN Startup Class
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/4521bf85a978ce80e0dfbcd4fd7afc21.png" alt="">
6、添加引用
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/faeb711b209a8ff74bf60d7abab29a5e.png" alt="">
7、引用的具体路径：C:\Program Files (x86)\Common
Files\GrapeCity\ActiveReports 13 ，选择
GrapeCity.ActiveReports.Aspnet.Viewer.dll 的引用添加到项目中
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/8d3a979a5d4ba4463ac41746a6f87ff8.png" alt="">
8、复制 Web.Config 文件，然后替换项目中已经存在的Web.Config
文件，Web.Config的路径：
<pre class="hljs"><code><code>C:\\Program Files (x86)\\GrapeCity\\ActiveReports 13\\Deployment\\JSViewer
</code></code></pre>注意点：移除 Web.Config 中的
<pre class="hljs javascript"><code><code class="lang-html"><handlers>
<add name="nostaticfile" path="*" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</code></code></pre>
9、添加和配置报告中间件，例如：
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/11406c07e9f9c045154da55deff376fc.png" alt="">
10、中添加一个新的 HtmlPage1.html
11、在 Scripts 文件夹下添加 JS Viewer 对应的 JS 和 CSS 文件
12、JS和CSS文件的路径如下：C:\Program Files (x86)\GrapeCity\ActiveReports13\Deployment\JSViewer
13、复制 jsViewer.min.js 和 jsViewer.min.css 文件到 ‘scripts’ 文件夹下
14、在新建的 HtmlPage1.html的添加如下代码：
<pre class="hljs xml"><code><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.4.85/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.cat.net/css?family=Open+Sans:400,300,600,700" type="text/css">
<link rel="stylesheet" href="scripts/jsViewer.min.css" type="text/css">
<script src="scripts/jsViewer.min.js"></script>
</head>
<body>

<div class=theme-default id="viewerContainer">Loading Report</div>
</body>
</html>

<script type="text/javascript">
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 element: '#viewerContainer',
 reportID: 'ReportName.rdlx', // the id of the report to display
 availableExports: ['Xml', 'Pdf', 'Excel'],
 reportService: {}
 // other properties
});
</script>
</code></code></pre>
15、报表运行结果如下：
<img style="max-width:800px;" src="https://www.grapecity.com.cn/media/5d950ebc8a6a81b5a61c36296e242a01.png" alt="">
<h3 id="js-viewer-">JS Viewer示例的源码</h3>
>><a href="http://www.grapecity.com.cn/downloads/demo/JSViewerSample.zip">点击获取 JSViewer 示例源码</a>
<h3 id="-activereports-13-">更多ActiveReports 13 新特性：</h3>
<ol>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-pro-report-designer-for-web">ActiveReports 13
新特性（1）——Web端在线报表设计器</a></li>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-js-report-viewer">ActiveReports 13 新特性（2）——JS
Viewer渲染报表</a></li>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-new-report-chart">ActiveReports 13
新特性（3）——全新的图表控件</a></li>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-rdlx-reports-converted-to-page-reports">ActiveReports 13
新特性（4）——区域报表直接转换为页面报表</a></li>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-automatic-merge-of-cells">ActiveReports 13
新特性（5）——单元格的自动合并</a></li>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-improvement-of-rich-text-box">ActiveReports 13
新特性（6）——富文本框的改进</a></li>
<li><a href="https://www.grapecity.com.cn/blogs/activereports-v13-strengthening-of-regional-reporting-rich-text-box">ActiveReports 13 新特性（7）——区域报表富文本框
的加强</a></li>
</ol>

</div>

页: [1]

葡萄城开发者社区's Archiver

ActiveReports 13 新特性（2）——JS Viewer渲染报表