3

我的页面做什么：

用户选择一个报表，选择一些参数，然后点击预览按钮，调用水晶报表运行报表并将结果导出为PDF。我有一个 DIV，它有一个对象标签来显示 PDF 文件。

然后，他们可以设置一个计划来自动为他们运行报告。此计划部分使用日期选择器来选择计划的开始日期和结束日期。

显示 PDF（在 IE 中）时，日期选择器被阻止。如果对象显示一个简单的 HTML 文件，则 datepicker 覆盖得很好。因此，PDF 查看器要求它成为最重要的元素。

这是我正在使用的一个简单测试：

<html>
    <head>

        <link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
        <link href="styles/timepicker.css" rel="stylesheet" type="text/css" />

        <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-timepicker.js" type="text/javascript"></script>
        <!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->

        <script type="text/javascript">

            $(document).ready(function() {
                $('#txtStartDate').datepicker({minDate: new Date()});
                $('#txtEndDate').datepicker({minDate: new Date()});
                $('#txtTime').timepicker();
            });

        </script>        
    </head>
    <body>
        <form id="mainForm">
            <div id="divSchedule" style="z-index:2;font-family:Arial;font-size:8.5pt">
                <table cellpadding="3px" cellspacing="0" style="width:600px;display:block;padding: 0px 3px 0px 0px">
                    <tr><td colspan="7"><div style="width:100%;border-bottom:1px solid #F3C13D;color:#0067AC">Schedule automated report delivery</div></td></tr>
                    <tr>
                        <td><span>Start Date:</span></td>
                        <td><input id="txtStartDate" type="text" style="width:70px"/></td>
                        <td><span>End Date:</span></td>
                        <td><input id="txtEndDate" type="text" style="width:70px"/></td>
                        <td><span>Time:</span></td>
                        <td><input type="text" id="txtTime" style="width:70px"/></td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span>via:</span>
                            <input type="radio" name="rdoScheduleVia" value="Printer">Printer&nbsp;
                            <input type="radio" name="rdoScheduleVia" value="Email">Email
                        </td>
                        <td><span id="lblViaText">Printer Name:</span></td>
                        <td colspan="3"><input id="txtViaText" style="width:235px"/></td>
                        <td> 
                            <input type="button" ID="btnPrinterName"  value="Select Printer" Class="LoginButton" Width="115px" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                             <div style="widht:100%;align:right"><input type="button" ID="btnSaveSchedule"  Class="LoginButton" value="Save" /></div>
                        </td>
                        <td>
                             <input type="button" ID="btnCancel"  Class="LoginButton" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="divPDFView" style="z-index:1;height:300px;witdh:400px;border:1px solid blue">
                <object ID="objPrevReport" data="test.pdf" type="application/pdf" style="position:relative;z-index:-1;width:100%;height:100%">
                    alt : <a href="test.pdf">test.pdf</a>
                </object>
            </div>
        </form>
    </body>    
</html>

jQuery-ui-1.8.12 部分。风俗。我将 z-index 更改为 10 的日期选择器的 Css

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

. Ui-datepicker-cover {

    display: none; /*sorry for IE5*/

    display/**/: block; /*sorry for IE5*/

    position: relative; /*must have*/

    z-index: 10; /*must have*/

    filter: mask(); /*must have*/

    top: -4px; /*must have*/

    left: -4px; /*must have*/

    width: 200px; /*must have*/

    height: 200px; /*must have*/

}/*

这适用于 Firefox 4，加载与 IE 相同的查看器。显示日期选择器的下部存在延迟，好像 FF 正在考虑它然后决定这样做。

在 Chrome 中工作（使用它自己的 PDF 查看器）

IE8 和 IE9 在隐藏日期选择器弹出窗口的下部时做同样的事情

无论查看器是 Adob​​e 还是 PDF-Xchanger，我都有相同的结果（非常好的 PDF 查看器替代品）

任何帮助将不胜感激！

4

0 回答 0