Xuất excel xlsx góc cạnh

Ở đâ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ụ
Trong thư mục này, hãy tạo một tệp dịch vụ bằng lệnh bên dưới
dịch vụ ng g 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

8. Chỉ cần nhấp vào biểu tượng tệp excel có sẵn phía trên bảng và bạn sẽ thấy một tệp excel đang được tải xuống

Google Sheets API là một giao diện RESTful cho phép bạn đọc và sửa đổi dữ liệu của bảng tính. Các ứng dụng phổ biến nhất của API này bao gồm các tác vụ sau

• Tạo bảng tính
• Đọc và viết các giá trị ô bảng tính
• Cập nhật định dạng bảng tính
• Quản lý các trang tính được kết nối

Dưới đây là danh sách các thuật ngữ phổ biến được sử dụng trong API Trang tính

bảng tính

Đối tượng chính trong Google Trang tính có thể chứa nhiều trang tính, mỗi trang tính có thông tin có cấu trúc chứa trong các ô. Tài nguyên bảng tính đại diện cho mọi bảng tính và có giá trị spreadsheetId duy nhất, chứa các chữ cái, số, dấu gạch ngang hoặc dấu gạch dưới. Bạn có thể tìm thấy ID bảng tính trong URL Google Trang tính

https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=0

Tờ giấy

Một trang hoặc tab trong bảng tính. Tài nguyên trang tính đại diện cho mỗi trang tính và có tiêu đề duy nhất và giá trị số sheetId. Bạn có thể tìm thấy ID trang tính trong URL Google Trang tính

https://docs.google.com/spreadsheets/d/aBC-123_xYz/edit#gid=sheetId

Tế bào

Một trường văn bản hoặc dữ liệu riêng lẻ trong một trang tính. Các ô được sắp xếp theo hàng và cột và có thể được nhóm thành một phạm vi ô. Tài nguyên CellData đại diện cho từng ô nhưng không có giá trị ID duy nhất. Thay vào đó, tọa độ hàng và cột xác định các ô

ký hiệu A1

Cú pháp được sử dụng để xác định một ô hoặc phạm vi ô bằng một chuỗi chứa tên trang tính cộng với tọa độ ô bắt đầu và ô kết thúc bằng cách sử dụng các chữ cái cột và số hàng. Phương pháp này phổ biến và hữu ích nhất khi tham chiếu một phạm vi ô tuyệt đối

Hiển thị ví dụ

• Sheet1!A1:B2 đề cập đến hai ô đầu tiên trong hai hàng trên cùng của Trang tính 1
• Sheet1!A:A đề cập đến tất cả các ô trong cột đầu tiên của Sheet1
• Sheet1!1:2 đề cập đến tất cả các ô trong hai hàng đầu tiên của Sheet1
• Sheet1!A5:A đề cập đến tất cả các ô của cột đầu tiên của Trang tính 1, từ hàng 5 trở đi
• A1:B2 đề cập đến hai ô đầu tiên ở hai hàng trên cùng của trang tính hiển thị đầu tiên
• Sheet1 đề cập đến tất cả các ô trong Trang tính 1
• https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=00 đề cập đến tất cả các ô trong cột đầu tiên của trang tính có tên "Trang tính tùy chỉnh của tôi. " Dấu nháy đơn là bắt buộc đối với tên trang tính có dấu cách, ký tự đặc biệt hoặc tổ hợp chữ và số
• https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=01 đề cập đến tất cả các ô trong 'Trang tùy chỉnh của tôi'

Mẹo. Nếu có thể, hãy sử dụng các tên riêng biệt cho các đối tượng trong bảng tính của bạn. Ví dụ: A1 đề cập đến ô A1 trong trang tính hiển thị đầu tiên, trong khi 'A1' đề cập đến tất cả các ô trong trang tính có tên A1. Tương tự, Sheet1 đề cập đến tất cả các ô trong Sheet1. Tuy nhiên, nếu có một dải ô được đặt tên có tên là "Sheet1", thì Sheet1 đề cập đến dải ô đã đặt tên và 'Sheet1' đề cập đến trang tính

Ký hiệu R1C1

Cú pháp được sử dụng để xác định một ô hoặc phạm vi ô bằng một chuỗi chứa tên trang tính cộng với tọa độ ô bắt đầu và ô kết thúc bằng cách sử dụng số hàng và số cột. Phương pháp này ít phổ biến hơn ký hiệu A1, nhưng có thể hữu ích khi tham chiếu một dải ô tương ứng với vị trí của một ô nhất định

Hiển thị ví dụ

• https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=02 đề cập đến hai ô đầu tiên trong hai hàng trên cùng của Trang tính 1
• https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=03 đề cập đến hai ô đầu tiên trong hai hàng trên cùng của trang tính hiển thị đầu tiên
• https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=04 đề cập đến ô có ba hàng bên dưới và một cột ở bên phải của ô hiện tại

Một ô hoặc phạm vi ô được xác định có tên tùy chỉnh để đơn giản hóa các tham chiếu trong toàn bộ ứng dụng. A đại diện cho một phạm vi được đặt tên

Một ô hoặc phạm vi ô đã xác định không thể sửa đổi. A đại diện cho một phạm vi được bảo vệ

Bước tiếp theo

• Để tìm hiểu về cách phát triển bằng API Google Workspace, bao gồm cả việc xử lý xác thực và ủy quyền, hãy tham khảo phần Phát triển trên Google Workspace