Xuất Excel góc 12

Ở đây, mô-đun xlsx sẽ chuẩn bị sổ làm việc, trang tính cần thiết và đặt dữ liệu theo cách dạng bảng với trong các ô

Bắt kịp đường đua

1. Chuẩn bị một dự án góc cạnh mới với Angular CLI bằng lệnh bên dưới

ng new angular-file-exporter-demo

2. Khi dự án được tạo và cài đặt npm thành công. Chạy các lệnh dưới đây

npm cài đặt trình tiết kiệm tệp - lưu

npm cài đặt xlsx - lưu

3. Bây giờ hãy di chuyển đến thư mục ứng dụng và tạo một thư mục có tên là services/sharedServices. Tùy bạn sử dụng cái nào, tôi sẽ sử dụng dịch vụ.
Với thư mục này, hãy tạo tệp dịch vụ bằng lệnh bên dưới.
ng g dch v excel

Và sao chép dán đoạn mã dưới đây

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';const EXCEL_EXTENSION = '.xlsx';@Injectable()
export class ExcelService {
constructor() { }
public exportAsExcelFile(json: any[], excelFileName: string): void {  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);  const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };  const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  this.saveAsExcelFile(excelBuffer, excelFileName);
}private saveAsExcelFile(buffer: any, fileName: string): void {
   const data: Blob = new Blob([buffer], {type: EXCEL_TYPE});   FileSaver.saveAs(data, fileName + '_export_' + new  Date().getTime() + EXCEL_EXTENSION);
}
}

4. Bây giờ di chuyển đến ứng dụng. thành phần. ts và thêm đoạn mã dưới đây

import { Component } from '@angular/core';
import {ExcelService} from './services/excel.service';@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data: any = [{
eid: 'e101',
ename: 'ravi',
esal: 1000
},{
eid: 'e102',
ename: 'ram',
esal: 2000
},{
eid: 'e103',
ename: 'rajesh',
esal: 3000
}];constructor(private excelService:ExcelService){
}exportAsXLSX():void {
   this.excelService.exportAsExcelFile(this.data, 'sample');
}
}

Bây giờ chúng ta đã hoàn thành việc tạo một dịch vụ và truy cập nó trong thành phần bên ngoài, hãy thực hiện các thay đổi cần thiết trong ứng dụng. thành phần. html để hiển thị dữ liệu json trong bảng và nút xuất

5. mở ứng dụng. thành phần. html và lưu mã bên dưới

Exporting an excel file of type .xslx !!!
Export as XLSX by clicking the below button










 
   
Eid
   
Ename
   
Esal
 
 
   
{{item.eid}}
   
{{item.ename}}
   
{{item.esal}}
 

6. Và cũng là bước cuối cùng để hiển thị biểu tượng trên nút xuất, hãy thêm đường dẫn cdn của phông chữ tuyệt vời vào chỉ mục. tệp html.
https. //cdnjs. đám mây. com/ajax/libs/phông chữ tuyệt vời/4. 7. 0/css/phông chữ tuyệt vời. tối thiểu. css

7. Bây giờ hãy chạy lệnh ng serve và bạn vào localhost. 4200 trong trình duyệt và bạn có thể thấy màn hình bên dưới

Angular 13 và Bootstrap 5 đã xuất hiện và nếu bạn là người mới thì bạn phải kiểm tra hai liên kết bên dưới

1. Hướng dẫn cơ bản về Angular13
2. PrimeNG
3. Bootstrap 5

Các bạn bây giờ tôi tiếp tục trở đi và đây là đoạn mã đang hoạt động và vui lòng sử dụng cẩn thận đoạn mã này để tránh những sai lầm

1. Trước tiên, các bạn, chúng tôi cần thiết lập góc 12 mới và để làm điều này, chúng tôi cần chạy các lệnh bên dưới nhưng nếu bạn đã thiết lập góc 12 thì bạn có thể tránh các lệnh bên dưới. Thứ hai, chúng ta cũng nên cài đặt phiên bản nút mới nhất trên hệ thống của mình

npm install -g @angular/cli 

ng new angularprimeng //Create new Angular Project

cd angularprimeng // Go inside the Angular Project Folder

2. Bây giờ các bạn, chúng ta cần chạy các lệnh bên dưới vào thiết bị đầu cuối dự án của mình để cài đặt các mô-đun lưu tệp primeng và excel vào ứng dụng góc cạnh của chúng ta

npm install primeng --save

npm install primeicons --save 

npm install @angular/cdk --save

npm i file-saver

npm i xlsx

npm install primeflex --save //for flex layout

3. Bây giờ các bạn, chúng ta chỉ cần thêm mã bên dưới vào angular primeng/src/app/app. thành phần. html để xuất bản cuối cùng trên trình duyệt web