使用ajax或jquery.get（）中的数据打印div [英] Print a div with data from ajax or jquery.get()

问题描述

我有一个div：

<div id="contract"></div>

由JQuery使用innerHTML填充，客户端javascript和数据（HTML）来自我的服务器：

that gets populated by JQuery using innerHTML with strings from client side javascript and data (HTML) got from my server:

$('#submit').click(function () {       
    document.getElementById('contract').innerHTML = 'foobar';    
    var profile = $('#profile').val();
    var query = {
        'profile': profile
    };
    $.get('/foo/profileViewer', query, function (data) {
        var result = $.parseJSON(data);            
        document.getElementById('contract').innerHTML += result ;  //$('#contract').html(result); doesn't work either         
    })
});

我想打印合约 div 。

我尝试了建议的JQuery答案此处和此处并且都指向 div <的答案/ code> 已经包含HTML中的文本，而不是从服务器获取的内容。奇怪的是，如果我删除 $。get 并实现其中一个答案，foobar 确实如此打印出来。如果我不删除 $。获取，则无将被打印。我尝试使用 $ .ajax 而不是 $。get 但这不能解决问题。我尝试使用CSS解决方案此处，但这会混淆来自服务器端的数据（HTML），因为它已经有了CSS其中嵌入了分页媒体。因此，我不想使用CSS解决方案。

I tried the JQuery answers suggested here and here and all point to answers where div already contains the text in HTML to start with and not something which is obtained from a server. Weirdly, if I remove the $.get and implement one of the answers provided, "foobar" does get printed. If I do not remove the $.get, nothing gets printed. I tried using $.ajax instead of $.get but this does not resolve the issue. I tried using the CSS solution here but that messes up my data (HTML) coming from the server side as it already has CSS paged media embedded in it. Hence, I do not want to use the CSS solutions.

任何人都可以建议我使用JQuery打印 div的好方法当 div 包含从服务器端获得的数据？

Could anyone please suggest me a good way to use JQuery to print a div when the div contains data obtained from the server side?

推荐答案

尝试使用隐藏的iframe：

Try using a hidden iframe:

$('#submit').click(function (e) {  
    e.preventDefault();     
    $('#contract').empty();    
    var profile = $('#profile').val();
    var query = {
        profile: profile
    };
    $.get('/foo/profileViewer', query, function (data) {            
        $('body').append('<iframe id="printf" style="display:none;" name="printf"></iframe>');
        $('#printf').contents().find('body').append(data);
         window.frames["printf"].focus();
         window.frames["printf"].print();       
    })
});

https://jsfiddle.net/njezoem5/

这篇关于使用ajax或jquery.get（）中的数据打印div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！