ActiveReports v13現在提供基于JavaScript的一種全新的報表渲染方式——JS Viewer，與原來的Html5 Viewer相比，JS Viewer 具有以下優點：

• 響應式網頁設計

• 適應不同的屏幕尺寸

• 減少了對其它庫的依賴（如jQuery等）

• 適用于現代Web端的應用框架：Asp.net MVC，Asp.net Core MVC ，HTML5和主要的JavaScript框架，如Angular 和 Vue.js

總結了這么多JS Viewer的優點，下面讓我們一起來使用 JS Viewer進行報表的渲染吧（文末提供 JS Viewer示例的源碼下載）。

點擊下載ActiveReports試用版

JS Viewer渲染報表的步驟

1、首先打開VS并且新建一個Asp.net Web應用程序，同時.Net Framework版本選擇4.6.2

2、選擇一個空的項目，然后點擊確定

3、在菜單欄中>>選擇工具>>NuGet 包管理器>>程序包管理器控制臺

4、在程序包管理器的控制臺里輸入如下的命令：

install-package Microsoft.Owin.Host.SystemWeb –Pre

然后點擊“Enter”按鈕，就會在引用中自動添加對應的引用

5、在項目中，添加新建項，在新建項的選擇欄中選擇>>OWIN Startup Class

6、添加引用

7、引用的具體路徑：C:\Program Files (x86)\Common Files\GrapeCity\ActiveReports 13 ，選擇 GrapeCity.ActiveReports.Aspnet.Viewer.dll 的引用添加到項目中

8、復制Web.Config文件，然后替換項目中已經存在的Web.Config文件，Web.Config的路徑：

注意：移除Web.Config中的

9、添加和配置報告中間件，例如：

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的添加如下代碼：

        
                
    Loading Report

15、報表運行結果如下：

JS Viewer示例的源碼

>>點擊獲取JSViewer示例源碼

想要獲得 ActiveReports 更多資源的伙伴，請點這里。

想要獲取 ActiveReports 正版授權的伙伴，