Angular 服务示例
import { Injectable } from '@angular/core';
import webPrintPdf from 'web-print-pdf';
@Injectable({ providedIn: 'root' })
export class SilentPrintService {
async printHtml(html: string) {
return webPrintPdf.printHtml(
html,
{ paperFormat: 'A4', printBackground: true },
{ paperFormat: 'A4', printerName: '默认打印机' }
);
}
}
组件模板绑定按钮
@Component({
template: `
<button (click)="onPrint()" [disabled]="loading">
{{ loading ? '打印中…' : '静默打印' }}
</button>
`
})
export class ReportPrintComponent {
loading = false;
constructor(private print: SilentPrintService) {}
async onPrint() {
this.loading = true;
try {
await this.print.printHtml(document.getElementById('report')!.innerHTML);
} finally {
this.loading = false;
}
}
}
相关专题：
React 静默打印 ·
Vue 静默打印 ·
window.print 替代 ·
Linux 部署 ·
在线样例