要在Angular Material表格上创建打印视图,可以按照以下步骤操作:
npm install @angular/material @angular/cdk
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatTableModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
const ELEMENT_DATA: UserData[] = [
{id: '1', name: 'John', progress: '80%', color: 'red'},
{id: '2', name: 'Jane', progress: '90%', color: 'green'},
{id: '3', name: 'Mike', progress: '70%', color: 'blue'},
// Add more data here as needed
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
dataSource = ELEMENT_DATA;
}
ID
{{element.id}}
Name
{{element.name}}
Progress
{{element.progress}}
Color
{{element.color}}
printTable() {
const printContent = document.getElementById("print-table");
const printWindow = window.open("", "", "width=800,height=600");
printWindow.document.write('Print ');
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('');
printWindow.document.close();
printWindow.print();
}
现在,当用户点击打印按钮时,将会弹出一个新的窗口,其中包含了表格的打印视图。用户可以使用浏览器的打印功能打印该视图。
请注意,这只是一个简单的示例,可以根据具体需求进行定制。