堆棧內存溢出
  簡體   English   中英

在angularJS單頁面應用程序中使用javascript打印div

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

 原文  2014-03-05 05:42:52  8   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