javascript PRINT功能

Question

我正在进行图像缩放和平移模式。

一切正常，我们将其用于平面图。 我想要的是向观众添加一个打印按钮（相同的样式）。

参见示例：http://test.dpetroff.ru/jquery.iviewer/test/

需要它出现在[200％]按钮旁边。

有什么建议吗？

js在这里：http://test.dpetroff.ru/jquery.iviewer/jquery.iviewer.js

我的HTML代码：

    var $ = jQuery;
            $(document).ready(function(){
                  $("#viewer").iviewer(
                       {
                       src: "images/floorplan.gif", 
                       update_on_resize: false,
                       zoom: 200,
                       initCallback: function ()
                       {
                           var object = this;
                           $("#in").click(function(){ object.zoom_by(1);}); 
                           $("#out").click(function(){ object.zoom_by(-1);}); 
                           $("#fit").click(function(){ object.fit();}); 
                           $("#orig").click(function(){  object.set_zoom(100); }); 
                           $("#update").click(function(){ object.update_container_info();});
                                    console.log(this.img_object.display_width); //works*
                                             console.log(object.img_object.display_width); //getting undefined.*

                       },
                        onFinishLoad: function()
                        {
                $("#viewer").data('viewer').setCoords(-500,-500);
                            //this.setCoords(-0, -500);
                        }

//                       onMouseMove: function(object, coords) { },
//                       onStartDrag: function(object, coords) { return false; }, //this image will not be dragged
//                       onDrag: function(object, coords) { }
                  });

---

更新
好的不是100％不确定为什么。

这是HTML

 <div class="wrapper">
        <div id="viewer" class="viewer"></div>
        <div class="iviewer_zoom_print iviewer_common iviewer_button2"><a href="javascript:window.print()">PRINT</a></div>
    </div>

这是CSS：

.iviewer_zoom_print {
left: 170px;
font: 1em/28px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
color: #ec008c;
background-color: #fff;
text-align: center;
text-decoration:none
width: 60px;

链接css

.iviewer_zoom_print a:link { text-decoration:none !important;color:#ec008c !important;}

这是预览。

好的问题我有，这段代码是完成此操作的最佳方法吗？ 如何更好地定位打印按钮。 必须启用JS，因为它是一个模态窗口，因此非js打印功能实际上不是必备条件。

此外，我需要点击打印按钮打印整个图像。目前它只打印在视图中。

任何帮助表示感谢。

Answer 1

添加另一个DIV与课程iviewer_button，就像用于适合图片的现有iviewer_zoom_fit iviewer_common一样。这将调用打印功能 像<div class="iviewer_print iviewer_common iviewer_button"></div>

这样的东西

有关打印的实现，请参阅示例和文档here

Answer 2

如果你在一个体面的DOM检查器中查看生成的HTML，你会发现底部的按钮只是绝对定位的<div>元素。按钮是有三个CSS类：

• iviewer_zoom_X其中X是有问题的项目。
• iviewer_common
• iviewer_button

iviewer_zoom_X类用于设置定位，因此您可以添加具有相应iviewer_zoom_print和bottom值的left类，然后只需添加<div>使用这些类的观众：

• iviewer_zoom_print
• iviewer_common
• iviewer_button

并将点击处理程序绑定到它。

Answer 3

我认为我不能用打印功能帮助你（可能会把所有这些都放到iframe中？），但之前的评论是正确的 - 你需要用类iviewer_common，iviewer_button和你自己的（iviewer_print）创建一个div 。 iviewer_common设置默认对齐方式和边框，您需要在类中设置左侧位置和颜色。