堆栈内存溢出
  繁体   English   中英

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

[英]Print a div using javascript in angularJS single page application

 原文  2014-03-05 05:42:52  4   7    javascript/ angularjs/ html/ printing/ single-page-application

问题描述

我有一个使用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，所以取代了整个应用程序的主体。 因此，当我刷新页面或再次单击打印按钮时，页面的整个内容都将被删除。

7 个解决方案

解决方案1
 89 已采纳  2014-03-05 05:49:46

$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();
}

解决方案2
 11  2014-07-09 20:51:16

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

$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;
}

解决方案3
 7  2015-09-04 07:23:53

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

解决方案4
 1  2016-08-02 06:50:34

我这样做了： 

$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();
}

解决方案5
 0  2016-06-28 19:38:10

这对我和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();

解决方案6
 0  2018-10-13 14:00:28

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

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

对于那些不想创建一个新窗口的人，和我一样，关心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，因为看起来display：none在页面加载/刷新后第一次打印时打破了打印。

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

解决方案7
 -4  2017-06-30 12:43:05

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

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

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

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

我的工作很棒。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 AngularJS单页应用程序架构 使用 AngularJs 打印 Div 内容 选择输入不起作用？ 使用单页应用程序AngularJS 使用后退按钮移动单页应用程序AngularJS 在单页应用程序中使用AngularJs UI Router和全局变量 如何使用Angularjs在URL内部没有＃的单页应用程序？ 使用Angularjs和ui.router的单页应用程序 使用JavaScript / AngularJS / CSS将Div Height设置为Page height 通过使用纯Javascript在单页应用程序上使用Google跟踪代码管理器 AngularJS Multistep Form单页应用程序
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM