The process of adding a web viewer to a project is rather simple. A web viewer with a standard skin will definitely meet your requirements in case you are not planning to deeply customize the viewer. This short guide relies on the fact a developer has a strong knowledge of the technology used in his/her web application and plugging in CSS and Java files to a project is quite effortless.
Step 1
Add the scripts from
Web\Skins\Default\Scripts folder as well as skin files from
Web\Skins\Default\Content folder to your project.
Step 2
The following CSS files should be plugged in to your web page:<link href="<path_to_scripts_folder>/WebViewerSkin.css" rel="stylesheet" type="text/css" />
<link href="< path_to_scripts_folder >/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
The following JS files should be plugged in to your web page:<script src="< path_to_scripts_folder >/jquery-1.9.1.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/jquery-ui-1.10.3.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/jquery.treeview.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/mscorlib.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/PerpetuumSoft.Reporting.WebViewer.Client.Model.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/PerpetuumSoft.Reporting.WebViewer.Client.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/WebViewerSkin.js" type="text/javascript"></script>
Step 3
Add an empty
div element to a web page:
<div id="reportViewer"></div>
Step 4
Add the following JavaScript code that creates a reportViewer in a
div:
$(document).ready(function () {
var reportViewer = ReportViewerConstructor.Create("#reportViewer");
reportViewer.setServiceUrl("<path_to_service>");
reportViewer.reportName = "<report_name>";
reportViewer.renderDocument();
});
The full markup should look as displayed below:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <link href="Styles/WebViewerSkin.css" rel="stylesheet" type="text/css" />
- <link href="Styles/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
- <title></title>
- </head>
- <body>
- <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
- <script src="Scripts/jquery-ui-1.10.3.js" type="text/javascript"></script>
- <script src="Scripts/jquery.treeview.js" type="text/javascript"></script>
- <script src="Scripts/mscorlib.js" type="text/javascript"></script>
- <script src="Scripts/PerpetuumSoft.Reporting.WebViewer.Client.Model.js" type="text/javascript"></script>
- <script src="Scripts/PerpetuumSoft.Reporting.WebViewer.Client.js" type="text/javascript"></script>
- <script src="Scripts/WebViewerSkin.js" type="text/javascript"></script>
- <script language="javascript">
- $(document).ready(function () {
- var reportViewer = ReportViewerConstructor.Create("#reportViewer");
- reportViewer.setServiceUrl("http://localhost:29855/ReportService1.svc");
- reportViewer.reportName = "report";
- reportViewer.renderDocument();
- });
-
- </script>
- <div id="reportViewer">
-
- </div>
- </body>
- </html>

Article ID: 618, Created: August 11, 2015 at 1:17 PM, Modified: August 11, 2015 at 1:17 PM