javascript - 如何使用 reportviewer api 查找何时加载 reportviewer

Question

我为我的所有报告创建了一个页面，我正在使用我制作的工具栏加载这些报告的不同版本(折线图、饼图、图表、图形等)。除了非表格类型的图表(折线图、饼图、条形图等)外，一切都在那里运行良好。当这些被渲染时，我发现图例和系列中的文本变得模糊，并且通过这里和其他地方的一些研究发现它们被转换为图像，然后通过自动生成的 css 类在我身上调整图像的大小。

首先，我想做的是:我想从加载时生成的图像中删除此类。如果我关闭报告的异步呈现

AsyncRendering="false"

连同这段 jquery(针对包含 reportviewer 的 div):

$(document).ready(function () {
    $('#reportDiv img').removeAttr('class');

});

那么结果就如我们所料。图像没有缩放，一切都很好。然而，问题是这些报告中的一些可能非常大，导致用户没有任何视觉反馈来判断是否正在发生某些事情。我想继续使用异步渲染，所以我开始研究 reportviewer javascript api。

Sys.Application.add_load(function () {
        var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
        reportViewer.add_propertyChanged(viewerPropertyChanged);
    });

function viewerPropertyChanged(sender, e) {
        var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");

        if (e.get_propertyName() === "isLoading") {

            var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
            button.disabled = viewer.get_isLoading();
        }
        else {

            if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
                alert("here");

            }
        }
    }

第一部分 (isLoading) 按预期工作，禁用按钮。然而，在加载后我立即得到

Object doesn't support property or method 'get_reportAreaContent'

我是否遗漏了一些明显的东西？这些是我用作引用的来自 msdn 的链接:

• reportviewer isLoading
• reportviewer ReportAreaContentType

Answer 1

条形图、折线图、饼图等被渲染为图像。图像根据报表查看器控件的大小重新调整大小。我没有使用 AsyncRendering="false"，而是创建了这个 javascript 解决方法，它解决了我的问题。

var app = Sys.Application;
app.add_init(ApplicationInit);

function ApplicationInit(sender) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (!prm.get_isInAsyncPostBack()) {
        prm.add_endRequest(EndRequest)
    }
}

function EndRequest(sender, args) {
    var reportViewerControlId = "ReportViewer1";
    if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
        var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
        var renderedReportImage = $("#" + reportViewerControlContainer + " img");
        renderedReportImage.removeAttr("style").removeAttr("class");
        var styleAttr = renderedReportImage.attr("style");
        var classAttr = renderedReportImage.attr("class");
        if (typeof styleAttr === 'undefined') {
            console.log("Successfully removed the style attribute from the rendered report image!");
        }
        if (typeof classAttr === 'undefined') {
            console.log("Successfully removed the class attribute from the rendered report image!");
        }
    }
}

基本上，我正在为 ReportViewerControl 的 ID 监听 PageRequestManager 的 endRequest，然后简单地从图像中删除样式和类属性以显示未修改的图像。