asp.net中panzoom库和window.print()的问题

Posted 2023-05-07

【中文标题】asp.net中panzoom库和window.print()的问题

【英文标题】：Problems with panzoom library and window.print () in asp.net

【发布时间】：2015-10-06 08:52:01

【问题描述】：

我有一个按钮栏，其中三个用于图像缩放和滚动，第四个是发送打印图像，通过库完成panzoom缩放和滚动，但是如果命令打印（发送成功) .现在如果我回到网站，我想放大，不要，我应该怎么做才能让我继续处理图像？？

<section>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-12 btn-group">
                            <button type="button" class="zoom-in btn btn-default">
                                <span class="glyphicon glyphicon-zoom-in"></span>
                            </button>
                            <button type="button" class="zoom-out btn btn-default">
                                <span class="glyphicon glyphicon-zoom-out"></span>
                            </button>
                            <button type="button" class="reset btn btn-default">
                                <span class="glyphicon glyphicon-resize-full"></span>
                            </button>
                            <button name="printButton" id="printButton" type="button" class="btn btn-default" onclick="printDiv('printableArea')" runat="server">
                                <span class="glyphicon glyphicon-print"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panzoom">
                        <div id="printableArea">
                            <img src="img/descarga.jpg"  class="img-responsive">
                             <script type="text/javascript">
                                 function printDiv(divName) 
                                     var printContents = document.getElementById(divName).innerhtml;
                                     var originalContents = document.body.innerHTML;
                                     document.body.innerHTML = printContents;
                                     window.print();
                                     document.body.innerHTML = originalContents;
                                 
                        </script>
                        </div>   
                    </div>
                </div>
            </div>
            </section>

而panzoom的部分是

(function () 
    var $section = $('section').first();
    $section.find('.panzoom').panzoom(
    $zoomIn: $section.find(".zoom-in"),
    $zoomOut: $section.find(".zoom-out"),
    $zoomRange: $section.find(".zoom-range"),
    $reset: $section.find(".reset")
   );
   )();

【问题讨论】：

抱歉，我没有解决方案，但如果您找不到解决方案，请尝试打开新窗口打印图像。 [***.com/questions/20612870/…

【参考方案1】：

我的解决方案是重做 panzoom 中的所有内容，如下面的代码所示，但我有一个问题，就像我定义的另一个函数中的函数调用一样，所以我保存了复制粘贴

function printDiv(divName) 
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
    window.onfocus = function () 
    window.close();

var $section = $('section').first();
$section.find('.panzoom').panzoom(
    $zoomIn: $section.find(".zoom-in"),
    $zoomOut: $section.find(".zoom-out"),
    $zoomRange: $section.find(".zoom-range"),
    $reset: $section.find(".reset")
);
;