通过iframe将浏览器中的PDF URL发送到打印机 [英] Send a PDF URL in a browser to the printer via iframe

查看:113
本文介绍了通过iframe将浏览器中的PDF URL发送到打印机的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

对于当前的非IE浏览器(Chrome,Firefox,Opera,Safari),我希望在给定该PDF的URL的情况下将PDF文档发送到打印机。

For current non-IE browsers (Chrome, Firefox, Opera, Safari), I would like to send a PDF document to the printer given a URL to that PDF.

为了避免出现多余的窗口,我现在正在使用< iframe> 进行此操作,但我希望在打印完成后关闭iframe,否则会出现一些浏览器当一个人试图离开页面时会弹出一个对话框。

To avoid superfluous windows popping up, I am presently doing this with an <iframe> but I would like to close the iframe after the printing is completed, otherwise some browsers will pop up a dialog when one tries to leave the page.

这是我到目前为止所提出的(为了简单起见使用lodash和jQuery):

Here is what I have come up with so far (using lodash and jQuery for simplicity):

var _print_url, _remove_iframe, _set_print;

_print_url = function(src_url) {
  $("<iframe src='" + src_url + "' type='application/pdf'>").css({
    visibility: 'hidden',
    position: 'fixed',
    right: '0',
    bottom: '0'
  }).on('load', _set_print).appendTo(document.body);
};

_remove_iframe = function(iframe) {
  return $(iframe).parent().find(iframe).detach();
};

_set_print = function() {
  this.contentWindow.print();
/* 
 * Where we could do @contentWindow.close() with a window, we must remove the
 * print iframe from the DOM. We have to engage in some async madness
 * it seems, for no apparent reason other than this won't work
 * synchronously (@cw.print above must be async, it seems) - even though 
 * window.close() appears to work synchronously.
 */
  _.delay(_.partial(_remove_iframe, this), 100);
};

有时,谷歌浏览器似乎打印对话框最终正确显示PDF,但是当选择时打印机并确认打印它的意图实际上将帧的父页面的内容发送到打印机而不是PDF本身。

Sometimes it seems with Google Chrome the print-dialog ends up showing the PDF correctly, but when one selects the printer and confirms the intention to print it will actually send the contents of the frame's parent page to the printer instead of the PDF itself.

有一个链接 Mozilla页面上的建议但此文档目前似乎已过时。我能找到的最好的例子是通过对发票的Amazon Web Services打印对话框进行逆向工程,但是会打开一个窗口。

There is a link suggestions on the Mozilla page but this document seems obsolete at the moment. The best example I could find was by reverse-engineering the Amazon Web Services print dialog for invoices, but that opens a window.

我考虑的一个替代方案是 Google云打印,但显然这需要安装额外的软件或配置Google帐户,这两者都不是我希望除非必要,否则会强加给用户。

One alternative I have considered is Google Cloud Print, but obviously this requires the installation of extra software or configuration of a Google Account, neither of which I would wish to impose on users unless necessary.

是否有其他人可以在给定URL的情况下打印PDF的示例,特别是使用Javascript并且没有多余的额外浏览器添加是什么或人工制品如windows弹出?

Are there other examples of how one might print a PDF given a URL, particularly with Javascript and without otherwise superfluous additional browser add-ons or artefacts such as windows popping up?

推荐答案

- 请注意,这种方法你永远不会看到弹出窗口拦截器 -

-- NOTE whit this approach you will never see the popup blocker --

我在几个月前用ajax应用程序遇到了类似的问题,我遇到的问题是我需要创建pdf文件并存储才能将其发送到打印,我做的是以下内容:

I run in a similar problem wiht an ajax application a couple month ago, the problem was I faced was I need to create the pdf file and store before to send it to print, what I did is the following:

我没有使用iframe。此应用程序使用php TCPDF 创建pdf和 jquery 下划线用于模板系统。

I didnt use iframes. This application works with php TCPDF for creating the pdf and jquery and underscore for the templating system.

你可以在 http://www.screenr.com/Ur07 (2:18分钟)

you can see the demo video at http://www.screenr.com/Ur07 (2:18 min)


  1. 发送信息通过JSON(ajax)为了实现这一点,因为我遇到了一切都在ajax中的问题,所以我无法发布信息,所以我做的是附加一个隐藏的表单到DOM然后使用target =_ blank将帖子设置到一个新窗口(您将关闭该过程的结束)。

  1. Send the information via JSON (ajax) To achieve this because I faced the problem that everything was in ajax, so I couldn't make post with the information, so what I did is to append a hidden form to the DOM and then with the target="_blank" make the post to a new window (which you will close a the end of the process).

HTML隐藏虚拟表单

HTML hidden virtual form

<form method='<%= method %>' 
      action="<%= action %>" 
      name="<%= name %>" 
      id="<%= id %>" 
      target="_blank">
    <input type='hidden' name='json' id='<%= valueId %>' />
</form>






Javascript


Javascript

 function makePost(){
  var _t = _.template(_JS_Templates["print.form.hidden"]); //this the html of the form

  var o = {
    method : "POST",
    action : js_WEB_ + "/print.php",
    name : "print_virtual_form",
    id : "print_virtual_form_id",
    valueId : "print_virtual_value"
  }

 var form = _t(o);
 $(".warp").append(form); //appending the form to the dom

  var json = {
    data : data // some data
  }     

 $("#print_virtual_value").val(JSON.stringify(json)); //assing to the hidden input the value and stringify the json
 $("#print_virtual_form_id").submit(); //make the post submmitting the form
 $("#print_virtual_form_id").remove(); //removing the "virtual hidden form"

}

2.-当你在我的情况下收到json使用php你创建了你必须创建的任何东西,我这样做你可以看到这个例子中的PHP代码(是我的答案)

2.- when you receive the json in my case was using php you create whatever you have to create, I did it in this way you can see the php code in this example (is my answer)

在ajax调用中使用TCPDF生成PDF

3.-最后在这里,很酷的部分是响应,在这部分,我使用php文件写一个javascript代码说有关闭父窗口并报告特定函数的json答案,是一种回调。

3.- And finally in this is where the cool parts come is the response, in this part, I use the php file to write a javascript code saying that have to close the parent windows and report the json answer to an specific function, is kind of callback.

switch($_SERVER['REQUEST_METHOD']){
    case "GET":
        echo "Denied";
    break;

    case "POST":
        if(isset($_POST["json"])){
            if(!empty($_POST["json"])){
                $json = $_POST["json"];             
                $hash = PDF::makePDF($json);
                echo "<script>
                  function init() {
                        //calling callback
                                        //returning control to the previous browser
                                 window.opener.someclass.finish('".$hash."');
                                 window.close();
                    }
                window.onload = init;                       
             </script>";
            }else{
                echo "not json detected";
            }
        }else{
            echo "not json detected";
        }
    break;

4.-并且你可以在窗口浏览器中使用控件结束。

4.- and for the end with the control in you window browser you can do.

var someobject = (function(name){
  //private
  var finish(data){
    //do whatever you want with the json data
  }

   //public
   var $r = {};
   $r.finish = function(data){ 
     finish(data); //you will pass the data to the finish function and that is..!! voila!!
   }

   return $r;
})("someobject");

我知道这不是你问的问题,但我认为这是同一问题的另一种方法稍微复杂一点,我可以保证在很多浏览器中工作,用户会喜欢你的方式。他们永远不会看到正在发生的事情,他们会下载文件,只是期望这样做,点击一个链接并保存文件。

I know is not exactly what you ask but is another approach to the same problem while I think this is little more complex, I can guarantee works in a lot of browser and the users will love the way you do it. They will never see what is happening and they will download the file just how the expect to do it, clicking a link and the saving the file.

只需我的两分钱快乐的编码。

Just my two cents and happy coding.

这篇关于通过iframe将浏览器中的PDF URL发送到打印机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆