javascript:打印通过ajax接收的文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17348605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 07:58:43  来源:igfitidea点击:

javascript: Print text that is received via ajax

javascriptajaxpopup-blocker

提问by user984003

This is what I want to do:

这就是我想要做的:

  1. User clicks printbutton;
  2. This calls function, which does ajax call to get the text to be printed;
  3. A new window is opened and the text is written to this.
  1. 用户点击打印按钮;
  2. 这个调用函数,它会调用ajax来获取要打印的文本;
  3. 将打开一个新窗口,并将文本写入其中。

The window and print is handled like this:

窗口和打印是这样处理的:

 my_text = "hello";

 newWin= window.open();
 newWin.document.write(my_text);
 newWin.document.close();
 newWin.focus();
 newWin.print();
 newWin.close();

This works fine. My issue is how to get my_text. I have tried to put the above code inside an ajax call:

这工作正常。我的问题是如何获得my_text. 我试图将上面的代码放在 ajax 调用中:

$.ajax({
        type: "GET", url: the_url, data: {},
        success: function(data){
             newWin= window.open();
             newWin.document.write(data);
             newWin.document.close();
             newWin.focus();
             newWin.print();
             newWin.close();
        }
        ,error: function() {
        } 
     }); 

However, this causes the new window to be seen as a pop-up and it's caught by the pop-up blocker. If I choose to see the pop-up message then it has correctly filled in the text. I tried opening the window first, but then nothing gets written to it.

但是,这会导致新窗口被视为弹出窗口并被弹出窗口阻止程序捕获。如果我选择查看弹出消息,则它已正确填充文本。我尝试先打开窗口,但随后没有写入任何内容。

回答by Sean

Try moving the line:

尝试移动该行:

newWin = window.open();

before the $.ajax(...) call. Your window will open immediately, and when the ajax call completes, your success handler should be able to write to it. You would end up with something like:

在 $.ajax(...) 调用之前。您的窗口将立即打开,当 ajax 调用完成时,您的成功处理程序应该能够写入它。你最终会得到类似的结果:

var newWin = window.open();
$.ajax({
    type: "GET", url: the_url, data: {},
    success: function(data){
        newWin.document.write(data);
        newWin.document.close();
        newWin.focus();
        newWin.print();
        newWin.close();
    }
    ,error: function() {
    }
});

Simplified version using setTimeout for "proof on concept" purposes.

使用 setTimeout 进行“概念验证”的简化版本。

<html>
<head>
<script>
function openWindow() {
  var win = window.open("about:blank", "", "width=800,height=600");
  setTimeout(function() {
    win.document.write("Hello world!");
    win.document.close();
  }, 1000)
}
</script>
</head>
<body>

<button type="button" onclick="openWindow()">Click me</button>

</body>
</html>

回答by curtisdf

Popup blockers block any window that isn't opened by a direct user action (such as clicking the mouse.) But since your AJAX call is asynchronous, the browser doesn't think it's part of your button-click event.

弹出窗口阻止程序会阻止任何不是由直接用户操作(例如单击鼠标)打开的窗口。但是由于您的 AJAX 调用是异步的,浏览器不会认为它是您的按钮单击事件的一部分。

Try adding async: falseas a config parameter in your $.ajax()call. However, using synchronous AJAX requests has a side-effect of freezing your web page momentarily while the data is loading. Instead of using window.open(), you may want to find another way to print the data. You could just provide a link to the printable page and bypass needing any JavaScript in the first place. That may be the simplest of all. Or you might be able to use a separate stylesheet in conjunction with CSS's @media printattribute to hide your page's normal content and only print what came in via AJAX.

尝试async: false在您的$.ajax()通话中添加为配置参数。但是,使用同步 AJAX 请求有一个副作用,即在加载数据时会暂时冻结您的网页。window.open()您可能想找到另一种打印数据的方法,而不是使用。您可以只提供一个指向可打印页面的链接,而无需首先使用任何 JavaScript。这可能是最简单的。或者,您可以将单独的样式表与 CSS 的@media 打印属性结合使用来隐藏页面的正常内容,并仅打印通过 AJAX 输入的内容。