在angularJS单页应用程序中使用javascript打印div_Javascript_Angularjs_Html_Printing_Single Page Application

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

javascript angularjs html printing

在angularJS单页应用程序中使用javascript打印div,javascript,angularjs,html,printing,single-page-application,Javascript,Angularjs,Html,Printing,Single Page Application,我有一个使用angularJS的单页web应用程序。我需要打印某一页的div。我尝试了以下方法：该页面包含几个div（print.html）此代码打印所需的div，但存在问题。语句document.body.innerHTML=originalContents替换整个应用程序的主体，因为它是SPA。因此，当我刷新页面或再次单击“打印”按钮时，页面的全部内容将被删除。$scope.printDiv=function（divName）{ $scope.printDiv = function(

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

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

此代码打印所需的div，但存在问题。语句

document.body.innerHTML=originalContents替换整个应用程序的主体，因为它是SPA。因此，当我刷新页面或再次单击“打印”按钮时，页面的全部内容将被删除。
$scope.printDiv=function（divName）{
$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();
} 

var printContents=document.getElementById（divName）.innerHTML；
var popupWin=window.open（“”，"u blank’，“宽度=300，高度=300”）；
popupWin.document.open（）；
popupWin.document.write（“”+打印内容+“”）；
popupWin.document.close（）；
} 
需要两个条件函数：一个用于Google Chrome，另一个用于其余浏览器
$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;
}

$scope.printDiv=函数（divName）{
var printContents=document.getElementById（divName）.innerHTML；
if（navigator.userAgent.toLowerCase（）.indexOf（'chrome'）>-1）{
var popupWin=window.open（“，”u blank“，”宽度=600，高度=600，滚动条=no，菜单栏=no，工具栏=no，位置=no，状态=no，标题栏=no”）；
popupWin.window.focus（）；
popupWin.document.write（“”）+
'' +
''+打印内容+''；
popupWin.onbeforeunload=函数（事件）{
popupWin.close（）；
返回“.\n”；
};
popupWin.onabort=函数（事件）{
popupWin.document.close（）；
popupWin.close（）；
}
}否则{
var popupWin=window.open（“”，"u blank’，“宽度=800，高度=600”）；
popupWin.document.open（）；
popupWin.document.write（“”+打印内容+“”）；
popupWin.document.close（）；
}
popupWin.document.close（）；
返回true；
}
您现在可以使用名为
的库，这就是我在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();

var printContents=document.getElementById（'div-id-selector'）.innerHTML；
var popupWin=window.open（“，”u blank“，”宽度=800，高度=800，滚动条=no，菜单栏=no，工具栏=no，位置=no，状态=no，标题栏=no，顶部=50”）；
popupWin.window.focus（）；
popupWin.document.open（）；
popupWin.document.write（'打印输出的标题'
+'' 
+'' 
+打印内容+“”）；
popupWin.document.close（）；
我是这样做的：
$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();
}

$scope.printDiv=函数（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，resizeable=yes，screenX=200，screenY=200，personalbar=no，scrollbars=yes”；
var newWin=window.open（“，”u blank“，winAttr）；
var writeDoc=newWin.document；
writeDoc.open（）；
writeDoc.write（“”+docHead+“”+printContents+“”）；
writeDoc.close（）；
newWin.focus（）；
}
我认为没有必要写这么大的代码。
我刚刚安装了角打印鲍尔包，一切都准备好了
只需将其注入模块，就可以开始了
使用预构建的打印指令&有趣的是，如果不想打印，还可以隐藏一些div

我的工作非常出色。
好吧，我可能会有一些甚至不同的方法
我知道它不会适合所有人，但除非有人觉得它有用
对于那些不想打开新窗口的人，以及像我一样关心css样式的人，这就是我的想法：
我将我的应用程序的视图包装到附加容器中，该容器在打印时隐藏，并且在打印时显示需要打印的内容的附加容器
以下工作示例：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.people=[{
“id”：“000”，
“姓名”：“阿尔弗雷德”
},
{
“id”：“020”，
“姓名”：“罗伯特”
},
{
“id”：“200”，
“姓名”：“我”
}];
$scope.isPrinting=false；
$scope.printElement={}；
$scope.printDiv=函数（e）
{
控制台日志（e）；
$scope.printElement=e；
$scope.isPrinting=true；
//如果没有提示，它似乎不起作用
setTimeout（函数（）{
window.print（）；
},50);
setTimeout（函数（）{
$scope.isPrinting=false；
},50);
};
});

打印我id:{{printElement.id}
打印名称：{{printElement.name}
打印{{person.name}
请包括一把小提琴。所有$http
请求在此之后（另外，我无法重新加载页面…只有将url复制到新选项卡才能工作…我无法理解为什么..这里也是一样，所有$http请求都会停止，但只有在我关闭新窗口时才会发生在Chrome上。Firefox或IE工作得很好。我发现为什么这个解决方案不起作用，下面是答案-为什么他会得到var originalContents=document.body.innerHTML；他没有sn无论如何都不能使用原始内容。对于特定的div转换和下载，是否有类似的功能作为pdf文件？为什么在卸载之前有和原始内容？另外，您缺少popuwin.document中的
标记。写下行。非常感谢，只是一个未使用的变量：originalContents这个库在不断变化，我会小心地在生产中使用它，直到一些问题得到解决resolved@G.Mart3天前，作者在本周末推出了一项解决跨浏览器兼容性的计划：“是的，我真的很抱歉
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();

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