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

标签 javascript html asp.net jquery.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" alt="Visualización del original de la forma migratoria" 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")
   });
   })();

Image with buttons

最佳答案

我的解决方案是重做 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")
});
};

关于javascript - asp.net中panzoom库和window.print()的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31462179/

相关文章:

javascript - 当键盘在移动设备上可见时,jQuery/js/html5 更改页面内容

javascript - 使用 JavaScript 读取/写入/更改本地文本文件(在 DropBox 上)的内容

asp.net - 在 ASP.NET Web 应用程序中创建嵌套母版页

ASP.NET Web 服务初始化

javascript - 如何从文件夹项目 ASP.NET 中读取 JSON 文件

javascript - Bluebird promise 泄漏警告

javascript - jQuery UI 多选

javascript - 如何使带有 &lt;input&gt; 按钮的搜索栏在输入时打开域?

javascript - 从未调用过的自定义函数

javascript - 保持 2 个 div 之间的距离恒定