Ở đâ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
- 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
- Hướng dẫn cơ bản về Angular13
- PrimeNG
- 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
Brand Last Year Sale This Year Sale Last Year Profit This Year Profit {{sale.brand}} {{sale.lastYearSale}} {{sale.thisYearSale}} {{sale.lastYearProfit}} {{sale.thisYearProfit}}
4. Bây giờ các bạn, chúng ta chỉ cần thêm đoạn mã dưới đây vào góc primeng/angular. tập tin json
"styles": [ "src/styles.css", "node_modules/primeng/resources/themes/saga-blue/theme.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/primeflex/primeflex.css", "node_modules/primeicons/primeicons.css", ], ...
5. Bây giờ các bạn, chúng ta chỉ cần thêm đoạn mã dưới đây vào angular primeng/src/app/app. thành phần. tập tin ts
________số 86. Bây giờ các bạn, chúng ta chỉ cần thêm đoạn mã dưới đây vào angular primeng/src/app/app. mô-đun. tập tin ts
... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TableModule } from 'primeng/table'; import { DropdownModule } from 'primeng/dropdown'; import { ButtonModule } from 'primeng/button'; @NgModule[{ ... imports: [ ... BrowserAnimationsModule, TableModule, DropdownModule, ButtonModule ], ...
Cuối cùng thì bạn bè phải chạy lệnh ng serve vào thiết bị đầu cuối của bạn để chạy dự án góc 12&11
Bây giờ chúng ta đã làm xong bạn bè. Nếu bạn có bất kỳ loại truy vấn, đề xuất và yêu cầu mới nào thì hãy bình luận bên dưới
Ghi chú. Các bạn, bài này mình chỉ nói setup cơ bản và các thứ, các bạn có thể thay đổi code theo yêu cầu của các bạn
Tôi sẽ đánh giá cao nếu bạn sẽ cho biết quan điểm của bạn cho bài viết này. Lượt xem của bạn tốt hay xấu không quan trọng vì với lượt xem của bạn, tôi sẽ làm cho các bài đăng tiếp theo của mình hay và hữu ích hơn