如何在 HTML5 上制作示例 Telerik 报告答案

【问题标题】：How to make a sample telerik reporting on HTML5如何在 HTML5 上制作示例 Telerik 报告
【发布时间】：2014-05-02 00:48:50
【问题描述】：

大家好，我正在尝试使用 HTML5 平台上的 Telerik Reporting 制作示例报告。

这是我的代码，能够制作“模板”

<!DOCTYPE html>

<head> 



<title>Telerik HTML5 Report Viewer</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

<link href="ReportViewer/styles/ReportViewer-8.0.14.225.css" rel="stylesheet" />
<script src="ReportViewer/js/ReportViewer-8.0.14.225.js"></script>

<style>
    #reportViewer1 {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;

        font-family: 'segoe ui', 'ms sans serif';

        overflow: hidden;
    }
</style>

<div id="reportViewer1" class="k-widget">
    loading...
</div>

<script type="text/javascript">
    $("#reportViewer1").telerik_ReportViewer({
        serviceUrl: "../api/reports/",
        templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate.html',
        reportSource: { report: "Product Catalog.trdx" }
    });

</script>

如何将示例报告：“Product Catalog.trdx”调用到我的 HTML 页面？谢谢！

【问题讨论】：

标签： html reporting telerik-reporting

【解决方案1】：

据我所知，答案取决于几件事。如果您使用的是 Telerik 报告示例演示，那么您应该有一些已经可以工作的东西，但是如果您从头开始构建一个，那么它会引出您正在使用哪个报告解析器的问题。您提供的示例让我认为您想要使用 ReportFileResolver。使用它的关键是您需要“产品目录.trdx”位于项目文件夹中，并且名称必须完全匹配。因此，如果您在 WebApi 或 MVC 项目中工作，那么产品文件应该与您的 html 页面具有相同的文件深度（IE 它不能隐藏在文件夹中，除非您指定它应该隐藏）。

WebApi 或 MVC 项目中使用的报告控制器将如下所示。

protected override IReportResolver CreateReportResolver()
    {
        var appPath = HttpContext.Current.Server.MapPath("~/");

        return new ReportFileResolver(appPath);
    }

这里的诀窍是报表源和您在此处提供的路径一起工作。您基本上可以将其视为 appPath + report = 查找文件的位置。

【讨论】：