Question

所以我有一个问题。正如我们大多数人在提问时一样。

我们的网站应该在IE中普遍使用，理想情况下至少也适用于Chrome。目前Chrome可能被诅咒，因为IE证明不合作（大惊喜呃？）。

我的任务是制作一份报告，以非常具体的方式使用Telerik RadGrids和Fusion Charts图表。此过程涉及必须将我的报告div（以下代码中的ReportDataContainer）复制到子窗口。

在非compat / edge模式下，它的工作正常。主报告加载。单击打印按钮，弹出，向上进入新窗口。将ReportDataContainer内容与Fusion Charts渲染方法的JS处理程序一起写入新窗口，并在渲染两者后再调用 - 调用print。

在compat模式下，图表永远不会在新窗口上加载。不知道为什么不 - 它在原始报告中呈现得很好。

无论如何都有一些代码。

这是我用来弹出新窗口，写入并打印的JS： -

    function PrintDrill() {
    var cssArray = document.getElementsByTagName('style');
    var css = "";
    for (var i = 0; i < cssArray.length; i++) {
        css += "<style type='text/css'>" + cssArray[i].innerHTML + "</style>";
    }
    drill = window.open();
    drill.document.write("<html>" +
        "<head>" + css +
        "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />" +
        "<script type='text/javascript'>" +
        "function FC_Rendered(DOMId) { $(\"#\" + DOMId.split(\"_\")[0] + \"Loaded\").val('true'); } " +
        "<\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery-1.5.min.js'><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery.color.js'><\/script>" +
        "</head>" +
        "<body>" +
        "<input type='hidden' id='divActualYearGraphLoaded' name='actualYearGraphLoaded' value='false' />" +
        "<input type='hidden' id='divParcGraphLoaded' name='parcGraphLoaded' value='false' />" +
        $("#ReportDataContainer").html() +
        "</body>");

    drill.document.close();

    setTimeout(finishedRendering, 2000);
}

var drill = null;

function finishedRendering() {
    var loadedActualYear = $('#divActualYearGraphLoaded', drill.document).val();
    var loadedParc = $('#divParcGraphLoaded', drill.document).val();
    if (loadedActualYear == 'true' && loadedParc == 'true') {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        if (msie > 0)
            drill.location.reload();
        setTimeout(printMyChild, 3000);
    } else {
        setTimeout(finishedRendering, 1000);
    }
}

function printMyChild() {
    drill.print();
}

为了比较，下面是FusionChart呈现的两种方式，即第一个边缘（有效的边缘）： -

<div id="divActualYearGraph_Control_ChartDivDiv">
<object width="100%" height="430" class="FusionCharts" id="divActualYearGraph_Control_ChartDiv" data="/CTWebCharts/V3/StackedColumn3DLine.swf" type="application/x-shockwave-flash" lang="EN" style="visibility: visible;">
    <param name="scaleMode" value="noScale">
    <param name="scale" value="noScale">
    <param name="wMode" value="opaque">
    <param name="bgColor" value="#ffffff">
    <param name="allowScriptAccess" value="always">
    <param name="quality" value="best">
    <param name="flashvars" value="*snip*">
</object>

其次是compat模式 - 也就是那个不起作用的模式（无论如何在新窗口上：/）： -

<DIV id=divActualYearGraph_Control_ChartDivDiv>
<OBJECT lang=EN id=divActualYearGraph_Control_ChartDiv class=FusionCharts style="VISIBILITY: visible" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width="100%" height=430>
    <PARAM NAME="_cx" VALUE="10081">
    <PARAM NAME="_cy" VALUE="11377">
    <PARAM NAME="FlashVars" VALUE="*snip*">
    <PARAM NAME="Movie" VALUE="/CTWebCharts/V3/StackedColumn3DLine.swf">
    <PARAM NAME="Src" VALUE="/CTWebCharts/V3/StackedColumn3DLine.swf">
    <PARAM NAME="WMode" VALUE="Opaque">
    <PARAM NAME="Play" VALUE="0">
    <PARAM NAME="Loop" VALUE="-1">
    <PARAM NAME="Quality" VALUE="High">
    <PARAM NAME="SAlign" VALUE="LT">
    <PARAM NAME="Menu" VALUE="-1">
    <PARAM NAME="Base" VALUE="">
    <PARAM NAME="AllowScriptAccess" VALUE="always">
    <PARAM NAME="Scale" VALUE="NoScale">
    <PARAM NAME="DeviceFont" VALUE="0">
    <PARAM NAME="EmbedMovie" VALUE="0">
    <PARAM NAME="BGColor" VALUE="FFFFFF">
    <PARAM NAME="SWRemote" VALUE="">
    <PARAM NAME="MovieData" VALUE="">
    <PARAM NAME="SeamlessTabbing" VALUE="1">
    <PARAM NAME="Profile" VALUE="0">
    <PARAM NAME="ProfileAddress" VALUE="">
    <PARAM NAME="ProfilePort" VALUE="0">
    <PARAM NAME="AllowNetworking" VALUE="all">
    <PARAM NAME="AllowFullScreen" VALUE="false">
    <PARAM NAME="AllowFullScreenInteractive" VALUE="false">
    <PARAM NAME="IsDependent" VALUE="0">
</OBJECT>

所以是的 - 渲染效果非常不同。只是将新窗口更改为边缘而不是？不行。迫使主报告首先进入边缘也会导致所有地狱崩溃。不是一种选择。

我尝试过复制到iframe进行打印。同样的问题。

发布在FusionCharts论坛上，虽然稍微脱节了。

反正。有什么想法吗？

Answer 1

好的，所以我最终想出了一个解决方案。考虑到FusionCharts就像“OMG，你是一个旧版本！升级！”，这在技术上并不理想。但不幸的是，这个解决方案超出了我采取行动的权力。

第一个重大变化？子文档必须完成所有工作。

其次，我没有依赖简单地复制图表对象并希望它能够工作，而是存储了生成的图表XML，以便在创建父页面之后在父页面上呈现报告，然后传递给子项并在非常后重新呈现专门将渲染设置为javascript渲染器。

如果您跟随我的脚步，请注意这一点 - 存储时要小心。如果你将它存储在HiddenField中，那么它就是XML，它最有可能给你带来悲伤。因此，请记住将其设为HTML安全，然后将其重新解析为原始值，然后再将其拉出并再次呈现。

所以，如果有人感兴趣或只是想告诉我这是多么糟糕的黑客 - 这是最终的代码： -

function UndoSafeForHTML(s) {
    s = ReplaceAll(s, "\\'", "'");
    s = ReplaceAll(s, "&lt;", "<");
    s = ReplaceAll(s, "&gt;", ">");
    return ReplaceAll(s, "<br>", "\n");
}

function ReplaceAll(s, find, replace) {
    return s.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function PrintDrill() {
    var cssArray = document.getElementsByTagName('style');
    var css = "";
    for (var i = 0; i < cssArray.length; i++) {
        css += "<style type='text/css'>" + cssArray[i].innerHTML + "</style>";
    }
    var parcXml = document.getElementById('<%# hdnParcChartXml.ClientID %>').value;
    var actualXml = document.getElementById('<%# hdnActualChartXml.ClientID %>').value;

    parcXml = UndoSafeForHTML(parcXml);
    actualXml = UndoSafeForHTML(actualXml);

    drill = window.open();
    drill.document.write("<html>" +
        "<head>" +
        css +
        "<script type=\"text/javascript\" src='/CTWebScripts/General.js'><\/script>" +
        "<script type=\"text/javascript\" src=\"/CTWebCharts/v3/swfobject.js\"><\/script>" +
        "<script type=\"text/javascript\" src=\"/CTWebCharts/V3/FusionCharts.js\"><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery-1.5.min.js'><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery.color.js'><\/script>" +
        "<script type='text/javascript'> " +
        "var intervalId = null; " +
        "function RenderCharts(){ " +
        "FusionCharts.setCurrentRenderer('javascript'); " +
        "$('#divActualYearGraph_Control_ChartDivDiv').empty(); " +
        "$('#divParcGraph_Control_ChartDivDiv').empty(); " +
        "updateFusionChart(\"divActualYearGraph_Control_ChartDivDiv\", \"" + actualXml + "\", \"430px\", \"430px\", \"/CTWebCharts/V3/StackedColumn3DLine.swf\", \"divActualYearGraph\");" +
        "updateFusionChart(\"divParcGraph_Control_ChartDivDiv\", \"" + parcXml + "\", \"430px\", \"430px\", \"/CTWebCharts/V3/StackedColumn3DLine.swf\", \"divParcGraph\");" +
        "intervalId = setInterval(HaveIRenderedYet, 3000);" +
        "} " +
        "" +
        "function HaveIRenderedYet(){" +
        "if($('#divParcGraphLoaded').val()=='true'&&$('#divActualYearGraphLoaded').val()=='true'){" +
        "" +
        "window.print();" +
        "setTimeout(function () { "+
        "window.close();"+
        "}, 10); " +
        "clearInterval(intervalId);" +
        "} "+
        "} " +
        "" +
        "function FC_Rendered(DOMId) { " +
        "$(\"#\" + DOMId.split(\"_\")[0] + \"Loaded\").val('true'); " +
        "}" +
        "<\/script>" +
        "</head>" +
        "<body onload='RenderCharts();'>" +
        "<input type='hidden' id='divActualYearGraphLoaded' name='actualYearGraphLoaded' value='false' />" +
        "<input type='hidden' id='divParcGraphLoaded' name='parcGraphLoaded' value='false' />" +
        "<input type='hidden' id='hdnLoadedGraphs' name='loadedGraphs' value='0' />" +
        $("#ReportDataContainer").html() +
        "</body>");

    drill.document.close();

}

var drill = null;

将FusionChart对象从父窗口写入子窗口

1 个答案: