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

IT技术 javascript angularjs html printing single-page-application
2021-02-21 10:03:10

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

6个回答
$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();
}
我发现为什么这个解决方案不起作用，这是答案 - stackoverflow.com/questions/23071291/...
2021-04-16 10:03:10
对于特定的 div 转换和下载为 pdf 文件，是否有这样的功能？
2021-04-24 10:03:10
$http在此之后所有请求都停止了...... :( 另外我无法重新加载页面......只能将 url 复制到新标签页工作......我不明白为什么......
2021-04-27 10:03:10
这里也是一样，所有 $http 请求都会停止，但只有在我关闭新窗口时才会在 Chrome 中发生。Firefox 或 IE 运行良好
2021-04-28 10:03:10
为什么他得到 var originalContents = document.body.innerHTML; 他不在任何地方使用 originalContents
2021-05-12 10:03:10

需要两个条件函数：一个用于 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;
}
为什么你有onbeforeunload和originalContents？此外，您缺少行中的</body>标签popupWin.document.write。
2021-04-26 10:03:10
非常感谢，只是一个未使用的变量： originalContents
2021-05-15 10:03:10

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

所以不幸的是没有 IE 的参考，边缘将是一个折腾。
2021-04-25 10:03:10
这个库在不断变化，我会小心在生产中使用它，直到一些问题得到解决
2021-04-28 10:03:10
@G.Mart 显然作者在本周末推出了一个主要版本来解决跨浏览器兼容性问题
2021-05-09 10:03:10
来自作者，3 天前：“是的，我真的很抱歉缺少多浏览器兼容性方面的更新。我预计本周末会发布一个支持 chrome、mozilla 和 safari 的新版本。将主要支持 Edge，但是可能仍有一两个错误。chrome、mozilla 和 safari。Edge 将主要受支持，但可能仍有一两个错误。”
2021-05-16 10:03:10

我是这样做的：

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

这就是在 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();
其它你可能感兴趣的问题
上一篇如何在 angular 6 项目中添加引导程序？ 下一篇运行“npm install”时，“x 包正在寻找资金”是什么意思？