要在Angular 7中直接打印收据,可以使用浏览器的打印功能。以下是一个示例代码,演示如何在Angular 7中实现打印功能:
print.component.ts
的新组件。import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-print',
templateUrl: './print.component.html',
styleUrls: ['./print.component.css']
})
export class PrintComponent implements OnInit {
constructor() { }
ngOnInit() {
}
printReceipt() {
window.print();
}
}
print.component.html
文件中,添加一个按钮并绑定到printReceipt()
方法。
在需要展示的收据数据处,使用合适的HTML和CSS格式进行展示。
在需要打印的页面中,添加一个链接或按钮,导航到PrintComponent
组件。
打印
app.module.ts
文件中,将PrintComponent
添加到declarations
和exports
数组中。import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { PrintComponent } from './print/print.component';
const routes: Routes = [
{ path: 'print', component: PrintComponent },
];
@NgModule({
declarations: [
AppComponent,
PrintComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
printReceipt()
方法,调用浏览器的打印功能。这样就可以在Angular 7中实现直接打印收据的功能了。