手工设置

在本主题中，我们将演示如何手动将HTML5报表查看器添加到HTML页面并显示报表。我们在这里使用的方法允许对配置进行完全控制。如果您正在寻找一种不那么复杂的方法，请考虑使用Visual Studio项目模板．

先决条件

在继续之前，请确保满足以下先决条件:

1. 熟悉HTML5报表查看器系统需求．

2. 一个运行中的应用程序，它在地址上托管一个Reporting REST服务/ api /报告．有关更多信息，请参见Telerik报告REST服务万博体育手机版网址．

3. 对象中的报表REST服务所在项目对报表库的引用[TelerikReporting_InstallDir] \例子\ CSharp | VB \ ReportLibrary \ Bin文件夹中。

4. Telerik Reporting的自定义Telerik Kendo UI发行版脚本(位于Html5 (TelerikReporting_InstallDir) \ \ ReportViewer \ js文件夹)或使用主流的Kendo UI发行版在本地下载或通过Kendo UI CDN服务．

   您必须在页面上只加载一个版本的Telerik Kendo UI样式和脚本。有关更多信息，请参阅．

在HTML页面中使用HTML5报表查看器

下面的步骤生成一个HTML页面，其设置与默认安装的本地Html5Demo项目的设置类似\ [TelerikReporting_InstallDir]的例子：

必须根据项目设置调整下面步骤中的所有路径引用。有关更多信息，请参阅ASP。NET Web项目路径MSDN文章。

1. 创建一个HTML5页面:

   <！DOCTYPE html>   
      
         
         
   map
    

   上面的DOCTYPE指令必须反映您的自定义需求。有关本教程中使用的页面设置的详细信息，请参阅定义文档兼容性MSDN文章。

2. 中初始化浏览器的视口< >头元素:

   viewport META标签用于控制移动浏览器的布局。

3. 控件中添加对jQuery的引用< >头元素:

   < script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本>

   jQuery必须在创建查看器对象之前加载。jQuery只能在页面上加载一次。

4. 中添加对Telerik Kendo UI样式的引用< >头元素:

   <！——所需的剑道样式——>  

5. 中添加对HTML5报表查看器JavaScript文件的引用< >头元素:

   < script src = " / api /报告/资源/ js / telerikReportViewer”> > < /脚本

   报表查看器JavaScript必须在任何其他Kendo小部件或包之后引用。

   如果页面中没有使用Kendo小部件，则报表查看器将注册一个自定义Kendo子集以启用所需的Kendo小部件。子集由报表服务提供服务。如果在页面上使用Kendo，或者首选CDN，请确保引用以下小部件:

   <！——< script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.core.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.data.odata.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.data.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.userevents.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.selectable.min.js " > < /脚本> <脚本脚本src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.calendar.min.js " > < / > < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.fx.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.draganddrop.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.mobile.scroller.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.virtuallist.min.js " > < /脚本> <脚本脚本src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.popup.min.js " > < / > < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.list.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.combobox.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.datepicker.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.resizable.min.js " > < /脚本> <脚本脚本src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.dropdownlist.min.js " > < / > < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.multiselect.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.splitter.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.window.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.color.min.js " > < /脚本> <脚本脚本src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.slider.min.js " > < / > < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.button.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.colorpicker.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.editor.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.listview.min.js " > < /脚本> <脚本脚本src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.menu.min.js " > < / > < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.panelbar.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.tooltip.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.treeview.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.913/js/kendo.touch.min.js " > < /脚本> kendo.mobile.min.js -可选,如果需要手势/触摸支持 Kendo .all.min.js或Kendo .web.min.js也可以使用，如果Kendo是在报告查看器之外使用——>

6. 添加一个< div >元素的身体< >元素，该元素将作为查看器小部件的占位符。的< div >元素的ID属性作为查看器对象的键(ID)。其内容(加载……)将在查看器的内容被加载(从模板)时显示。：

    loading…< / div >

7. 的底部添加以下脚本元素身体< >元素，并为reportViewer1创建HTML5 Report Viewer小部件< div >元素:

           
    loading… 
     
         
         
   map
    

8. 运行项目并导航到使用我们刚刚创建的HTML5 Report Viewer的页面。