项目环境Angular:

方法1、window.print()

HTML页面上的代码:

<div id="tenementBillTable" class="dialog-content">
<div *ngFor="let item of dataList" class="table-container">
<div class="table-header">电费清单</div>
<div class="table-info">
<div class="clearfix">
<span class="fl">户&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
<div class="fl">{{item.tenementName}}</div>
</div>
<div class="clearfix">
<span class="fl">电费年月:</span>
<div class="fl">{{item.month}}</div>
</div>
</div>
<div class="table-wrapper">
...
</div>
</div>
</div>

ts文件中:

printList(){
     this.tenementBillTable = this._elementRef.nativeElement.querySelector("#tenementBillTable");
document.body.style.visibility = "hidden";
this.tenementBillTable.style.visibility = "visible";
window.print();
document.body.style.visibility = "visible";
}

然后再用css控制打印分页

page-break-before,page-break-after属性控制分页。

不过在实际应用中,我需要打印的是弹框中的内容,使用原生的方法打印,页面的样式无法调整,故放弃使用这个方法。

方法2、jqprint插件

项目中引用jQuery不方便,也没有找到具体文档,所以这个方法还没试过。

方法3、essence-ng2-print基于angular的打印插件。

安装依赖

npm install --save essence-ng2-print@latest

html文件中引入

<essence-ng2-print #print [printHTML]="tenementBillTable" [showBtn]="false" [printCSS]="printCSS"></essence-ng2-print>

在module里面引入

import {EssenceNg2PrintModule} from "essence-ng2-print";
@NgModule({
imports: [
EssenceNg2PrintModule
]
})

组件中引入

import { EssenceNg2PrintComponent } from "essence-ng2-print";

再使用

@ViewChild("print") printComponent: EssenceNg2PrintComponent;

然后需要设置打印时使用的css文件。

 this.printCSS = ["assets/css/print.css"];

不过打印的时候也还是会有分页的问题,根据需要,在css文件中添加了page-break-after样式来控制打印分页。

.table-container:nth-child(3n) {
page-break-after: always;
}

其他的设置根据api文档里面可做具体的设置。

https://www.npmjs.com/package/essence-ng2-print

Inputs
mode(?string='iframe') - 打印模式。可选的值:iframe,popup standard(?string='html5') - 弹出窗口的网页文档标准,只适用于mode = 'popup'。可选的值:strict(严格模式),loose(兼容模式),html5(HTML5) popTitle(?string='') - 弹出窗口的标题,只适用于mode = 'popup' showBtn(?boolean=true) - 如果为true将显示打印按钮 btnText(?string='打印') - 打印按钮显示的文本 btnClass(?Object={"print-btn": true,"print-btn-success": true};) - 打印按钮class,传值与[ngClass]一样 printHTML(string|HTMLElement) - 打印的内容 printStyle(?string) - 打印内容style。将写进打印页面的style标签中 printCSS(?Array<string>) - 打印内容css文件路径。将在打印页面生成link标签,支持绝对/相对路径(相对于当前路由地址),建议用绝对路径 Outputs
printComplete - 打印完成的事件
Instance Method
print - 开始打印内容

js打印窗口内容并当窗口内容较长时自动分页的更多相关文章

  1. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  2. js打印div指定区域内容

    <script> function myPrint(obj){ var newWindow=window.open("打印窗口","_blank") ...

  3. js打印html中的内容

    js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. js打印Iframe中的内容,并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

  5. 透明窗口(窗口上面文字图片等内容不透明)的实现(使用SetLayeredWindowAttributes API函数)

    透明窗口(窗口上面文字图片等内容不透明)的实现 本文讨论通过SetLayeredWindowAttributes来实现本文的目的. SetLayeredWindowAttributes的实现必须将窗口 ...

  6. js打印保存用户输入的内容

    在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...

  7. WPF 应用 - 通过 js 缩放 System.Windows.Controls.WebBrowser 的内容

    1. 前提 原本是在大屏上展示系统,系统有个功能是加载第三方的网站,第三方网站按照大屏的分辨率写死了宽高: 现需要改到小屏展示系统,而这个第三方的网站不能随着 WebBrowser 窗口的尺寸调整网站 ...

  8. JS实现关闭当前子窗口,刷新父窗口

    一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() {  window.opener.location.href = ...

  9. html中使用js实现内容过长时部分

    有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...

随机推荐

  1. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...

  2. Batch批处理中的 参数 路径和字符串 处理详解

    1.截取字符串 截取字符串可以说是字符串处理功能中最常用的一个子功能了,能够实现截取字符串中的特定位置的一个或多个字符.举例说明其基本功能: @echo off set ifo=abcdefghijk ...

  3. IDEA默认快捷键

    idea常用快捷键大全   Idea常用快捷键大全,拿小本本记下来,忘记了可以方便查找.编写代码Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最 ...

  4. vue项目在IE下显示空白打不开问题

    近期遇到了项目是vue做的,在IE浏览器下打不开,显示空白问题,解决方案如下: 打不开的原因是因为少了babel-polyfill处理器,所以第一步需要下载: npm install babel-po ...

  5. CSS 6种完全居中最佳实践(整理)

    2016年4月28日 1.最佳法: .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position ...

  6. python 装饰器 对类和函数的装饰

    #装饰器:对类或者函数进行功能的扩展  很多需要缩进的没有进行缩进'''#第一步:基本函数def laxi(): print('拉屎')#调用函数laxi()laxi() print('======= ...

  7. docker调用yum时“"/usr/libexec/urlgrabber-ext-down" is not installed”

    原因: 1 docker镜像为高版本的fedora30:latest镜像,yum本身已被dnf替代,但部分功能仍不完整: 如:yum-builddep SPECS/xxx.spec 解决办法: 1 安 ...

  8. linux 部署系统通过SecureCRT启动tomcat 控制台中文乱码

    查资料又是查了半天 首先 查看linux 当前系统字符集命令 echo $LANG 查看linux 当前系统语言 locale 网上说的又是下中文包,又是改临时语言,这些不能一概而论,我也觉得我不是中 ...

  9. APACHE两种域名跳转法简单完成重定向

    当我们变更网站域名,或者申请多个域名指向一个网站的时候,这个时候我们就会用到域名跳转(或者叫域名重定向redirect.域名转向).下面用最简单的文字讲两种apache的域名跳转方法. 假设我们想把w ...

  10. 多线性方程组迭代算法——Gauss-Seidel迭代算法的Python实现

    多线性方程组(张量)迭代算法的原理请看这里:原理部分请留言,不方便公开分享 Jacobi迭代算法里有详细注释:多线性方程组迭代算法——Jacobi迭代算法的Python实现 import numpy ...