当前位置: 首页 > 面试题库 >

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

昌和悦
2023-03-14
问题内容

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


问题答案:
$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();
}


 类似资料:
  • 在我的项目中,客户需要使用POS打印机打印收据,这可以使用JAVA POS来完成。我在网上搜索没有任何有用的材料,但发现 1.javapos 2.jpos 可以有人请指导我应该进行JAVA POS或JPOS。 该应用程序基于Java Swing desktop而不是基于web。 真的坚持这一点,任何帮助都是非常有用的

  • 问题内容: 当我学到角度时,有两个问题困扰着我: 当用户刷新页面或点击后退按钮时,如何恢复状态? 如何在属于不同控制器的合并范围之间共享数据? 下面我展示了一个使用客户端会话存储的简单解决方案。在用户刷新页面或点击后退按钮后,它既允许共享公共数据,又可以自动恢复状态。 注意:事实证明,以下解决方案对于回答以下问题至关重要: 如何获得“后退”按钮以与AngularJSui路由器状态机一起使用? 问题

  • 问题内容: 我们正在寻找构建正在创建的应用程序前端的选项,并正在尝试评估一种对我们有用的工具,并为我们提供前进的最佳平台。 这是一个Node.js项目。我们最初的计划是使用Express并沿这条路线走,但是我们决定在开始此阶段之前,最好回顾一下那里的内容。我们的应用程序有几个我们认为不适合单页模型的领域,因为它们是从应用程序的角度关联的,而不是从一个角度来看的。 我们已经看到了一些可用于构建客户端

  • 问题内容: 我是AngularJS的新手,并仔细阅读了他们的教程,并对此有所了解。 我为我的项目准备了一个后端,每个端点都需要进行身份验证。 我想做什么 a。)我想为我的项目准备一个页面。 b。)用户在浏览器中单击URL后,根据用户是否登录,将在同一URL下向他显示主页/视图或登录页面/视图。 c。)如果用户未登录,则填写该表单,服务器将设置一个in会话,因此将根据以下身份验证对端点的所有其他请求

  • 我是AngularJS的新手,通过了他们的教程并对其有了感觉。 我为我的项目准备了一个后端,其中每个<code>REST<code>endpoint都需要进行身份验证。 我想做什么< br> a .)我想为我的项目< code > http://my project . com 创建一个单独的页面。< br> b .)一旦用户点击浏览器中的URL,根据用户是否登录,他将在同一URL < code

  • 我有一个flask应用程序,只有一条路线,没有复杂的事情发生,运行在docker容器中。我一辈子都不能让print语句出现在日志中(