要在Angular 2+中使用ngx-print库进行手动打印,你需要按照以下步骤进行操作:
npm install ngx-print --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxPrintModule } from 'ngx-print';
@NgModule({
imports: [
BrowserModule,
NgxPrintModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { NgxPrintService } from 'ngx-print';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private printService: NgxPrintService) { }
print(): void {
this.printService.print();
}
}
以上代码中,我们通过在构造函数中注入NgxPrintService来访问打印服务。然后,我们在print()方法中调用print()函数来触发打印。
请确保在Angular模板中包含了NgxPrintService所需的元素和样式。例如,如果你要打印整个页面,可以将以下代码添加到你的app.component.html模板中。
在app.component.css文件中添加以下样式。
@media print {
#print-section {
display: block !important;
}
}
这样,当点击“打印”按钮时,将会触发打印服务并打印指定区域的内容。