Cách chuyển đổi dữ liệu JSON sang bảng tính Excel với góc
Là một nhà phát triển, bạn sẵn sàng đối mặt với những thách thức mới hàng ngày trong các dự án khác nhau mà bạn có thể đang thực hiện. Các ứng dụng web đôi khi phải thực hiện một số tác vụ bổ sung để đạt được các mục tiêu khác nhau tùy thuộc vào yêu cầu kinh doanh hoặc kỹ thuật.
Bạn có thể cần thu thập dữ liệu từ API và xử lý dữ liệu đó ở định dạng khác, chẳng hạn như PDF, XML, DOCX hoặc XLSX.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách chuyển đổi dữ liệu JSON nhận được từ phản hồi API thành bảng tính Excel được tổ chức tốt trong ứng dụng Angular của bạn.
Mục Lục
Thư viện XLSX là gì?
Thư viện Xlsx là một tài nguyên hiệu quả cho các nhà phát triển Angular, những người muốn chuyển đổi dữ liệu JSON từ phản hồi API thành một bảng tính Excel gọn gàng. Thông qua việc sử dụng mô-đun này, các nhà phát triển có thể nhanh chóng tải xuống và sửa đổi dữ liệu JSON.
Bạn có thể sử dụng thư viện Xlsx để tạo báo cáo cho nhóm của mình hoặc để trình bày dữ liệu theo những cách mới. Nếu bạn muốn một cách nhanh chóng và dễ dàng để quản lý dữ liệu của mình trong các ứng dụng JavaScript thì đây là một lựa chọn tốt.
Cách định cấu hình thư viện XLSX với ứng dụng góc
Trước khi bắt đầu với thư viện Xlsx trong ứng dụng Angular của bạn, điều quan trọng là phải thiết lập môi trường phát triển Node.js và Angular trên máy của bạn. Khi đã cài đặt Node.js, Angular rất dễ thiết lập bằng cách chạy cài đặt npm -g @angular/cli trong một thiết bị đầu cuối.
Tạo một dự án Angular mới bằng cách chạy ng mới [your-angular-app-name] trong thiết bị đầu cuối. Sau đó điều hướng vào thư mục dự án như bên dưới:
Bạn cũng có thể khởi động máy chủ phát triển cục bộ bằng cách chạy ng phục vụ –ocho phép bạn xem ứng dụng Angular của mình và những thay đổi được thực hiện đối với ứng dụng đó trực tiếp trong trình duyệt.
Sau khi thiết lập ứng dụng Angular, cài đặt Thư viện Xlsx là một quy trình đơn giản mà bạn có thể hoàn thành chỉ bằng cách chạy npm cài đặt xlsx –save. Lệnh này sẽ cài đặt các phụ thuộc cần thiết để sử dụng thư viện Xlsx.
Cách chuyển đổi dữ liệu JSON sang định dạng XLSX trong góc
Với Angular CLI, bạn có thể tạo một dịch vụ mới bằng cách chạy ng tạo dịch vụ [service name] lệnh trong thiết bị đầu cuối. Ví dụ: trong trường hợp này, bạn có thể tạo dịch vụ Excel mà mình cần bằng cách sử dụng ng tạo dịch vụ ExcelService.
Cái này phát ra lệnh sẽ tạo tệp dịch vụ: ExcelService.service.ts, bên trong src/ứng dụng thư mục của dự án. Các tập tin trông như thế này theo mặc định:
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' })
export class ExcelServiceService {
constructor() { }
}
Cái này Dịch vụ Excel file sẽ đảm nhận chức năng xuất dữ liệu sang định dạng Excel. cập nhật các ExcelService.service.ts tập tin để trông giống như mã dưới đây:
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx'; const EXCEL_EXTENSION = '.xlsx';
@Injectable({ providedIn: 'root' })
export class ExcelServiceService {
constructor () { }
public exportToExcel (element: any, fileName: string): void {
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(element);
const workbook: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');
XLSX.writeFile(workbook, ${fileName}${EXCEL_EXTENSION});
}
}
Trong đoạn mã trên, bạn nhập Xlsx thư viện và tạo một biến không đổi, EXCEL_EXTENSION để lưu trữ phần mở rộng tệp Excel.
Các xuất sang Excel phương thức chấp nhận hai tham số: yếu tố Và tên tệp. Tham số phần tử đại diện cho dữ liệu để xuất ra tệp Excel, trong khi tên tệp tham số là tên của tệp Excel.
Để xuất dữ liệu sang tệp Excel, hãy tạo một trang tính bằng cách sử dụng json_to_sheet phương thức của thư viện Xlsx. Đồng thời tạo sổ làm việc bằng thư viện sách_mới phương pháp.
Sau đó, thêm trang tính vào sổ làm việc với book_append_sheet phương thức và lưu vào một tệp bằng cách sử dụng ghiTệp.
Trước đó, bạn đã tạo một dịch vụ Excel để hỗ trợ quá trình tải xuống và chuyển đổi dữ liệu JSON thành một trang tính Excel. Để sử dụng dịch vụ này, bạn cần tạo thành phần Angular có liên quan và nhập tệp dịch vụ vào đó.
import { ExcelService } from './excel.service';
Tiếp theo, bạn phải đưa nó vào hàm tạo của thành phần như thế này:
constructor(private excelService: ExcelService) {
....
}
Sau đó, bạn có thể tiếp tục triển khai chức năng (xuất Excel) nơi bạn sẽ sử dụng xuất sang Excel phương pháp xuất JSON sang Excel. Mã dưới đây trình bày cách thực hiện việc này.
exportExcel(): void {
const fileToExport = this.apiJsonResponseData.map((items:any) => {
return {
"User Id": items?.userId,
"Id": items?.id,
"Title": items?.title,
"Body": items?.body
}
}); this.excelService.exportToExcel(
fileToExport,
'yourExcelFile-' + new Date().getTime() + '.xlsx'
);
}
Trong đoạn mã trên, bạn đã xác định xuất Excel phương pháp để gọi các xuất sang Excel phương pháp của Dịch vụ Excel. Biến mới, tập tinToExport, lưu trữ dữ liệu để xuất. Các apiJsonResponseData mảng chứa dữ liệu JSON thu được từ phản hồi API.
Sau đó, xuất sang Excel phương pháp của excelDịch vụ lấy cái tập tinToExport và ưa thích của bạn tên tập tin. Lưu ý cách bạn có thể nối dấu thời gian hiện tại vào tên tệp để đảm bảo nó là duy nhất. Phương pháp này sẽ chuyển đổi dữ liệu JSON và xuất nó thành tệp XLSX mà sau đó bạn có thể xem trước trong Excel.
Chức năng này hiện có sẵn để sử dụng trong bất kỳ phần nào của ứng dụng Angular của bạn và bạn có thể dễ dàng thêm nó làm trình xử lý sự kiện cho một nhấp chuột sự kiện hoặc sử dụng nó theo bất kỳ cách phù hợp nào khác dựa trên yêu cầu của bạn.
Bạn có thể xem ví dụ sử dụng chức năng này trong hình bên dưới. Dữ liệu JSON từ một API bên ngoài hiển thị trên trang, với một nút để Xuất dữ liệu sang Excel:
Khi bạn bấm vào Xuất dữ liệu sang Excel nút, trình duyệt của bạn sẽ tải xuống tệp Excel. Khi bạn mở tệp XLSX, tệp bảng tính đầu ra trông như thế này:
Thư viện Xlsx có thể làm được nhiều việc hơn là chuyển đổi JSON sang định dạng Excel. Nó cung cấp một thư viện mạnh mẽ và hỗ trợ nhiều định dạng tệp khác nhau mà bạn có thể gặp phải trong kinh doanh. Kiểm tra tài liệu của thư viện Xlsx trên npm để tìm hiểu thêm về nó.
Chuyển đổi dữ liệu từ bảng tính JSON sang Excel trong góc
Bạn có thể sử dụng thư viện Xlsx để dễ dàng thao tác với bảng tính Excel trong ứng dụng web của mình. Các bước bạn đã thực hiện ở đây cho phép bạn chuyển đổi dữ liệu JSON từ API thành bảng tính Excel được tổ chức tốt. Bạn cũng có thể chuyển đổi dữ liệu Excel trở lại JSON bằng các hàm khác trong thư viện.
Một cách hay để thực hành sử dụng thư viện này là xây dựng ứng dụng tạo báo cáo hàng tuần hoặc hàng tháng từ API và sắp xếp chúng dưới dạng dữ liệu Excel.