在angularJS单页应用程序中使用JavaScript打印div


Print a div using javascript in angularJS single page application

我有一个使用angularJS的单页Web应用程序。我需要打印某个页面的div。
我尝试了以下操作：

该页面包含少量div(print.html)

1
2
3
4
5
6
    Do not print
 
 
    Print this div
 
  <button ng-click="printDiv('printableArea');">Print Div</button>

控制器具有以下脚本：

1
2
3
4
5
6
7
$scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;        
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

此代码可打印所需的div，但存在问题。
语句document.body.innerHTML = originalContents;替换了整个应用程序的主体，因为它是SPA。因此，当我刷新页面或再次单击"打印"按钮时，页面的全部内容将被删除。

相关讨论

1
2
3
4
5
6
7
$scope.printDiv = function(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var popupWin = window.open('', '_blank', 'width=300,height=300');
  popupWin.document.open();
  popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onloadx="window.print()">' + printContents + '</body></html>');
  popupWin.document.close();
}
相关讨论

需要两个条件函数：一个用于Google Chrome浏览器，另一个用于其余浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$scope.printDiv = function (divName) {

    var printContents = document.getElementById(divName).innerHTML;

    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
        var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWin.window.focus();
        popupWin.document.write('<!DOCTYPE html><html><head>' +
            '<link rel="stylesheet" type="text/css" href="style.css" />' +
            '</head><body onloadx="window.print()">' + printContents + '</body></html>');
        popupWin.onbeforeunload = function (event) {
            popupWin.close();
            return '.\
';
        };
        popupWin.onabort = function (event) {
            popupWin.document.close();
            popupWin.close();
        }
    } else {
        var popupWin = window.open('', '_blank', 'width=800,height=600');
        popupWin.document.open();
        popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onloadx="window.print()">' + printContents + '</body></html>');
        popupWin.document.close();
    }
    popupWin.document.close();

    return true;
}
相关讨论

您现在可以使用名为angular-print

的库

相关讨论

我这样做的方式是：

1
2
3
4
5
6
7
8
9
10
11
12
$scope.printDiv = function (div) {
  var docHead = document.head.outerHTML;
  var printContents = document.getElementById(div).outerHTML;
  var winAttr ="location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";

  var newWin = window.open("","_blank", winAttr);
  var writeDoc = newWin.document;
  writeDoc.open();
  writeDoc.write('<!doctype html><html>' + docHead + '<body onloadx="window.print()">' + printContents + '</body></html>');
  writeDoc.close();
  newWin.focus();
}
n

这就是在Chrome和Firefox中对我有效的方法！单击打印后，这将打开小打印窗口并自动将其关闭。

1
2
3
4
5
6
7
8
9
var printContents = document.getElementById('div-id-selector').innerHTML;
            var popupWin = window.open('', '_blank', 'width=800,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no,top=50');
            popupWin.window.focus();
            popupWin.document.open();
            popupWin.document.write('<!DOCTYPE html><html><head>TITLE OF THE PRINT OUT'
                                    +'<link rel="stylesheet" type="text/css" href="app/directory/file.css" />'
                                    +'</head><body onloadx="window.print(); window.close();">'
                                    + printContents + '</html>');
            popupWin.document.close();

我认为不需要编写这么大的代码。

我刚刚安装了有角印刷的凉亭包，一切准备就绪。

只需将其注入模块中就可以了
使用预建的打印指令

相关讨论