javascript jQuery 打印预览

jQuery Print Preview

提问by L84

I am attempting to add the jQuery Print Preview Plugininto my website but I use AddThis' Print Option. I am not sure if there is a way for me to add the print preview plugin using AddThis. Is there a way?

我正在尝试将jQuery 打印预览插件添加到我的网站，但我使用了 AddThis 打印选项。我不确定是否有办法使用 AddThis 添加打印预览插件。有办法吗？

Here is my code:

这是我的代码：

JS:

JS：

var $j = jQuery.noConflict();
   $j(document).ready(function() {
    $j('a.print-preview').printPreview();
});

AddThis Code:

添加此代码：

<!-- AddThis Peekaboo Toolbox : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style 
 addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul>
<li><a class="addthis_button_facebook"></a></li>
<li><a class="addthis_button_twitter"></a></li>
<li><a class="addthis_button_google_plusone_share"></a></li>
<li><a class="addthis_button_email"></a></li>
<li><a class="addthis_button_print print-preview"></a></li>
</ul>
</div>
<!-- AddThis Peekaboo Toolbox : END -->
<script type="text/javascript" src="https://s7.addthis.com/js/
   300/addthis_widget.js"></script>

When I click print it pops up the standard print dialog box in Firefox (or whatever browser I am using.)

当我单击打印时，它会在 Firefox（或我使用的任何浏览器）中弹出标准打印对话框。

I have a feeling that the AddThis JS is using something like JavaScript:window.print();to trigger the print dialog thus bypassing the jQuery Print Preview Plugin. Is there an easy way to change the AddThis behavior to trigger the print preview?

我有一种感觉，AddThis JS 正在使用类似JavaScript:window.print();触发打印对话框的东西，从而绕过 jQuery 打印预览插件。是否有一种简单的方法可以更改 AddThis 行为以触发打印预览？

采纳答案by L84

I was able to change the behavior of the AddThis print button by removing the classes and adding my own classes. Here is the code:

我能够通过删除类并添加我自己的类来更改 AddThis 打印按钮的行为。这是代码：

Original AddThis Code:

原始添加此代码：

<!-- AddThis Peekaboo Toolbox : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style 
  addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul>
<li><a class="addthis_button_facebook"></a></li>
<li><a class="addthis_button_twitter"></a></li>
<li><a class="addthis_button_google_plusone_share"></a></li>
<li><a class="addthis_button_email"></a></li>
<li><a class="addthis_button_print"></a></li>
</ul>
</div>
<!-- AddThis Peekaboo Toolbox : END -->
<script type="text/javascript" src="https://s7.addthis.com/js/300/
  addthis_widget.js"></script>

AddThis Code as it appears on the page:

AddThis 代码显示在页面上：

<div class="addthis_toolbox addthis_peekaboo_style 
   addthis_default_style addthis_label_style addthis_32x32_style">
<!-- Omited code not relevant to print function. --> 
<ul style="display: none;"> <!-- Changes to Display Block on Hover --> 
<!-- Omited code not relevant to print function. --> 
 <li>
  <a class="addthis_button_print at300b" title="Print" href="#">
  <span class=" at300bs at15nc at15t_print"></span>
      Print
   </a>
 </li>
</ul>

Edited Code to Change Print Function and Call Print Preview Plugin:

编辑代码以更改打印功能和调用打印预览插件：

<div class="addthis_toolbox addthis_peekaboo_style 
   addthis_default_style addthis_label_style addthis_32x32_style">
<!-- Omited code not relevant to print function. --> 
<ul style="display: none;"> <!-- Changes to Display Block on Hover --> 
<!-- Omited code not relevant to print function. --> 
 <li>
  <a class="print-preview at-print">
   <span class="at-print-span"></span>
       Print
   </a>
 </li>
</ul>

CSS to Show Print Correctly:

CSS 正确显示打印：

.at-print {
  padding: 0 2px;
  float: left;
  padding: 10px 20px !important;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.at-print-span {
  background-position: 0 -576px !important;
  background: url("//s7.addthis.com/static/r07/widget006_32x32_top.png") 
              no-repeat scroll left center transparent;
  display: block;
  height: 32px !important;
  line-height: 32px !important;
  overflow: hidden;
  width: 32px !important;
 float: left;
}

I am not sure all of the CSS is needed but it does work.

我不确定所有的 CSS 都需要，但它确实有效。

IMPORTANT NOTE:

重要的提示：

This is how you will get the Print Button functionality changed so I can call the jQuery Print Preview Function. However, you will throw an error when using the AddThis script and the Print Preview Plugin together. The Print Preview must be modified.

这就是您将如何更改打印按钮功能，以便我可以调用 jQuery 打印预览功能。但是，同时使用 AddThis 脚本和打印预览插件时会抛出错误。必须修改打印预览。

Here is what must be done around line 44 you will see the following code:

这是必须在第 44 行附近完成的操作，您将看到以下代码：

// The frame lives
        for (var i=0; i < window.frames.length; i++) {
            if (window.frames[i].name == "print-frame") {
                var print_frame_ref = window.frames[i].document;
                break;
            }
        }

Replace the above code with this:

将上面的代码替换为：

print_frame_ref = print_frame[0].contentWindow.document;

issue solved.

问题解决了。

回答by Conner

There are two options. One is to add a custom service with a print icon and just use that instead of the print API.

有两种选择。一种是添加带有打印图标的自定义服务，然后使用它而不是打印 API。

http://support.addthis.com/customer/portal/articles/381245-custom-services

http://support.addthis.com/customer/portal/articles/381245-custom-services

there's also a printfriendlyAPI built into addthis:

addthis 中还内置了一个打印友好的API：

http://www.addthis.com/services/list

http://www.addthis.com/services/list