Question

我有一张要在网络表单上打印的图片。图像控件在运行时动态加载图像。页面上有一个打印按钮，可以打印到pdf选项。创建的pdf会生成一个额外的页面以及要打印的图像

px中图像的大小为649 * 602。

用于打印的javascript代码如下

 function printDiv(divName) {
            var title = document.title;
            document.title = '';
            var printContents = document.getElementById(divName).innerHTML;

            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;
            window.print();

            document.body.innerHTML = originalContents;
            document.title = title;
            return false;
        }

aspx页面包含以下内容

<body style="background: none; padding-top: 8%; padding-left: 2%;">
    <form id="form1" runat="server">
    <div style="float: left; padding: 1%; width: 55%;" id="divInstructions">
        <asp:Image ID="imgInstructionSheet" runat="server" />
    </div>
    <div style="padding-left: 3%; float: left;">
        <asp:ImageButton runat="server" ID="imgBtnPrint" SkinID="Print" OnClientClick="return printDiv('divInstructions')"
            ToolTip="Print" />

            <%-- <asp:ImageButton runat="server" ID="imgBtnPrint" SkinID="Print" OnClientClick="return window.print();"
            ToolTip="Print" />--%>
    </div>
    <div class="wrapper" style="float: left; width: 36%; padding-top: 1%;">
        <a href="#" class="instrulink" style="padding-left: 2%" onmouseover="DisplayInstruction();" onmouseout="RemoveInstruction();">Display Instructions</a>
        <div style="display: none; padding-top: 8%; margin-left: -8%; float: left; overflow: hidden;"
            id="printinstruction">
            <table style="background-color: lightgray; padding: 5px; -moz-border-radius: 5px;
                -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;">
                <tr>
                    <td>
                        <img src="../Images/PageSetUp.jpg" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <b style="font-family:Verdana;font-size:14px;"><u>For Proper Printout Follow The Instructions:</u></b>
                            <br />
                            <li class="cssLi">Click on File Menu Goto Page Setup.</li>
                            <li class="cssLi">In Page Setup Dialog Box.</li>
                            <li class="cssLi">Set Paper Size To Letter (8.5x11").</li>
                            <li class="cssLi">Set Left Margin as 0.5 and Right Margin as 0.5.</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>

有什么方法可以消除多余的空白页面？我尝试缩小图像尺寸但没有效果。

渲染的html是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
    Instruction Sheet
</title>
    <script type="text/javascript" src="../Javascript/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        a:hover + div#printinstruction
        {
            visibility: visible;
        }
        .cssLi
        {
        position: relative;
        left: 16px;
        font-family: verdana;
        font-size: 14px;
        }
    </style>
    <script type="text/javascript">
        function HideFromAnchor() {
            setTimeout(function () {
                $('#printinstruction').slideUp();
            }, 1000);
        }

        $(document).ready(function () {

            $('a.instrulink').mouseover(function () {
                $('#printinstruction').slideDown();
                $('#printinstruction').css('margin-top', '26px')
                $('#printinstruction').css('width', '395px');
                $('#printinstruction').css('height', '510px');
            });

            $('div.wrapper').mouseleave(function () {
                $('#printinstruction').slideUp();
            });

        });


        function DisplayInstruction() {
            $('#printinstruction').slideDown();
            $('#printinstruction').css('margin-top', '26px')
            $('#printinstruction').css('width', '395px');
            $('#printinstruction').css('height', '510px');
        }

        function RemoveInstruction() {
            $('#printinstruction').slideUp();
        }

        function printDiv(divName) {
            var title = document.title;
            document.title = '';
            var printContents = document.getElementById(divName).innerHTML;

            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;
            window.print();

            document.body.innerHTML = originalContents;
            document.title = title;
            return false;
        }
    </script>
<link href="../App_Themes/default/1.9.1-jquery-ui.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/Default.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/form-field-tooltip.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/InquiryStyles.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/iqbackoffice.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/IQGLInputControl.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/jquery.ui.autocomplete.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/jquerydcss.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/popup.css" type="text/css" rel="stylesheet" /></head>
<body style="background: none; padding-top: 8%; padding-left: 2%;">
    <form name="form1" method="post" action="InstructionsSheet.aspx?CompanyId=evh&amp;CheckRequestType=CHECKREQUESTFAX" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MjQwOTYzMTgPZBYCAgMPZBYCAgEPDxYCHghJbWFnZVVybAUqQ2hlY2tSZXF1ZXN0SW1hZ2UvQ2hlY2tSZXF1ZXN0SW5zdF92ZWcuanBnZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFC2ltZ0J0blByaW50Ibf/odbg0lrXs/vlUgzr3pUnWxPgOvUSkGEiBBhsVNk=" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAIycRPb8aWzu8amhADzp9D7vxA7O73wp6e8dR9A7rKNQ6U+XW+JbgNalutolAAvvabl2zSBHocsK8wmZxrQUUtL" />
</div>
    <div style="float: left; padding: 1%; width: 55%;" id="divInstructions">
        <img id="imgInstructionSheet" src="CheckRequestImage/CheckRequestInst_veg.jpg" style="border-width:0px;" />
    </div>
    <div style="padding-left: 3%; float: left;">
        <input type="image" name="imgBtnPrint" id="imgBtnPrint" title="Print" class="Buttons" onmouseout="this.src=window.location.protocol + &#39;//&#39; + window.location.host + &#39;/&#39; + &#39;ClientWeb/Images/Print_over.png&#39;;" onmouseover="this.src=window.location.protocol + &#39;//&#39; + window.location.host + &#39;/&#39; + &#39;ClientWeb/Images/Print_on.png&#39;;" onfocus="this.src=window.location.protocol + &#39;//&#39; + window.location.host + &#39;/&#39; + &#39;ClientWeb/Images/Print_on.png&#39;;" onblur="this.src=window.location.protocol + &#39;//&#39; + window.location.host + &#39;/&#39; + &#39;ClientWeb/Images/Print_over.png&#39;;" src="../Images/Print_over.png" alt="Print" onclick="return printDiv(&#39;divInstructions&#39;);" style="border-width:0px;" />


    </div>
    <div class="wrapper" style="float: left; width: 36%; padding-top: 1%;">
        <a href="#" class="instrulink" style="padding-left: 2%" onmouseover="DisplayInstruction();" onmouseout="RemoveInstruction();">Display Instructions</a>
        <div style="display: none; padding-top: 8%; margin-left: -8%; float: left; overflow: hidden;"
            id="printinstruction">
            <table style="background-color: lightgray; padding: 5px; -moz-border-radius: 5px;
                -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;">
                <tr>
                    <td>
                        <img src="../Images/PageSetUp.jpg" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <b style="font-family:Verdana;font-size:14px;"><u>For Proper Printout Follow The Instructions:</u></b>
                            <br />
                            <li class="cssLi">Click on File Menu Goto Page Setup.</li>
                            <li class="cssLi">In Page Setup Dialog Box.</li>
                            <li class="cssLi">Set Paper Size To Letter (8.5x11").</li>
                            <li class="cssLi">Set Left Margin as 0.5 and Right Margin as 0.5.</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

打印时多余的空白页

0 个答案: