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

问题描述 投票：33回答：7

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

该页面包含几个div（print.html）

<div>
  <div>
    Do not print
  </div>
  <div id="printable">
    Print this div
  </div>
  <button ng-click="printDiv('printableArea');">Print Div</button>
</div>

控制器有以下脚本：

$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。因此，当我刷新页面或再次单击打印按钮时，页面的整个内容都将被删除。

javascript angularjs html printing single-page-application
7个回答
89
投票
$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 onload="window.print()">' + printContents + '</body></html>');
  popupWin.document.close();
}
11
投票

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

$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 onload="window.print()"><div class="reward-body">' + printContents + '</div></body></html>');
        popupWin.onbeforeunload = function (event) {
            popupWin.close();
            return '.\n';
        };
        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 onload="window.print()">' + printContents + '</body></html>');
        popupWin.document.close();
    }
    popupWin.document.close();

    return true;
}
7
投票

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

1
投票

我这样做了：

$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 onLoad="window.print()">' + printContents + '</body></html>');
  writeDoc.close();
  newWin.focus();
}
0
投票

这对我和Chrome和Firefox都有用！这将打开小打印窗口，并在您单击打印后自动关闭它。

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>TITLE OF THE PRINT OUT</title>' 
                                    +'<link rel="stylesheet" type="text/css" href="app/directory/file.css" />' 
                                    +'</head><body onload="window.print(); window.close();"><div>' 
                                    + printContents + '</div></html>');
            popupWin.document.close();
0
投票

好吧，我可能会有一些甚至不同的方法。

我知道它不适合所有人，但有人可能会觉得它很有用。

对于那些不想弹出一个新窗口的人，和我一样，关注css样式，这就是我想出的：

我将我的应用程序的视图包装到另外的容器中，该容器在打印时被隐藏，并且还有用于打印时显示的需要打印的容器。

下面的工作示例：

var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
  
    $scope.people = [{
      "id" : "000",
      "name" : "alfred"
    },
    {
      "id" : "020",
      "name" : "robert"
    },
    {
      "id" : "200",
      "name" : "me"
    }];

    $scope.isPrinting = false;
		$scope.printElement = {};
		
		$scope.printDiv = function(e)
		{
			console.log(e);
			$scope.printElement = e;
			
			$scope.isPrinting = true;
      
      //does not seem to work without toimeouts
			setTimeout(function(){
				window.print();
			},50);
			
			setTimeout(function(){
				$scope.isPrinting = false;
			},50);
			
			
		};
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

	<div ng-show="isPrinting">
		<p>Print me id: {{printElement.id}}</p>
    <p>Print me name: {{printElement.name}}</p>
	</div>
	
	<div ng-hide="isPrinting">
    <!-- your actual application code -->
    <div ng-repeat="person in people">
      <div ng-click="printDiv(person)">Print {{person.name}}</div>
    </div>
  </div>
  
  
</div>

请注意，我知道这不是一个优雅的解决方案，它有几个缺点，但它也有一些上升：

  • 不需要弹出窗口
  • 保持css完好无损
  • 不会将您的整个页面存储到var中（无论出于何种原因您不想这样做）

那么，无论你是谁，都有一个美好的一天，并继续编码:)

编辑：

如果它适合您的情况，您实际上可以使用：

@media print  { .noprint  { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }

而不是角度布尔值来选择您的打印和非打印内容

编辑：

更改了屏幕css，因为在页面加载/刷新后第一次打印时，显示：none无中断打印。

可见性：隐藏的方法似乎到目前为止工作。

-4
投票

我认为没有必要编写这么多大代码。

我刚刚安装了角度打印的凉亭包，一切都准备好了。

只需将它注入模块就可以了。使用预先构建的打印指令和有趣的是，如果你不想打印，你也可以隐藏一些div

http://angular-js.in/angularprint/

我的工作很棒。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.