Question

我正在使用Jquery插件来打印我的网页的特定div。它在Firfox和IE中运行良好。但不幸的是，它不适用于谷歌浏览器。实际上谷歌浏览器正在打印完整的网页，包括横幅，菜单和按钮。我无法解决这个问题。

这是我的示例代码

Java脚本

$(function () {
    $("input:button").click(function () {
        $("#print").printThis();
    });
});

HTML

<body>
<input type="button" value="print" />
<div id="print">
this is print area, it can be everything. this is print area, it can be everything. this is print area, it can be everything. this is print area, it can be everything. this is
</div>
</body>

Answer 1

你可以使用“纯”jQuery来做同样的事情：

    //Begin browser detection section
var isOpera = !! window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !! window.chrome && !isOpera; // Chrome 1+
var isIE = false || !! document.documentMode; // At least IE6
    //End browser detection section

    //User click on something
$('a[href="#print"]').on("click", function () {
    var data = "<div> a lot of HTML code from AJAX call or from your DIV </div>";
            CreateWindow(data);
});


function CreateWindow(data) {
    var mywindow = window.open('about:blank', '_blank');
    var myWindowContents = '<html>' +
        '<head>' +
        '<title>Results</title>' +
        '<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">' +
        '</head>' +
        '<body >' + data +
        '<script src="http://code.jquery.com/jquery-2.1.0.min.js type="text/javascript">' + '<' + '/script>' +
        '<script type="text/javascript">' +
        '$(document).ready(function () {' +
        '});' +
        '<' + '/script>' +
        '</body>' +
        '</html>';
    mywindow.document.write(myWindowContents);
    mywindow.document.close();
    mywindow.focus();
    if (!isChrome) {
        mywindow.print();
    }
}

您还可以在此处查看我的代码： http://jsfiddle.net/pvkovalev/2pn4p/ 我想它会让你知道如何解决你的问题。

谷歌镀铬打印问题

1 个答案: