Xuất sang excel Angular 11

Chúng tôi thường xuất dữ liệu từ bảng sang trang tính excel trong các ứng dụng web. Có hai cách để triển khai chức năng xuất trong Angular. một là bằng cách sử dụng chỉ thị thành phần và cái còn lại là bằng cách sử dụng chỉ thị thuộc tính. Trong bài đăng này, chúng tôi sẽ so sánh cả hai và kiểm tra các trường hợp sử dụng của chúng.

Dưới đây là những chủ đề chúng ta sẽ đi qua trong bài viết này

• Dự án mẫu
• điều kiện tiên quyết
• Triển khai với Chỉ thị Thành phần
• Thực hiện với chỉ thị thuộc tính
• so sánh
• Tóm lược
• Phần kết luận

Mẹo. Dễ dàng chia sẻ và quản lý các thành phần NG của bạn trong các dự án với Bit (Github). Xuất bản các thành phần với chi phí bằng 0, sử dụng và phát triển chúng trong các ứng dụng khác nhau, đề xuất các bản cập nhật và xây dựng nhanh hơn theo nhóm. Thôi buông đi

Chia sẻ các thành phần giao diện người dùng với Bit. Dễ dàng chia sẻ giữa các dự án với tư cách là một nhóm

Chia sẻ các thành phần mã có thể tái sử dụng theo nhóm · Bit

Dễ dàng chia sẻ các thành phần có thể tái sử dụng giữa các dự án và ứng dụng để xây dựng nhanh hơn theo nhóm. Hợp tác để phát triển…

chút. nhà phát triển

Dự án mẫu

Đây là dữ liệu bảng ứng dụng đơn giản với nút xuất ở góc trên cùng bên phải. Khi bạn nhấp vào nút, dữ liệu từ bảng sẽ được tải xuống trong một trang tính excel

dự án ví dụ với chức năng xuất khẩu

Bạn có thể nhập dự án từ đây và chạy trực tiếp

// clone the project
git clone https://github.com/bbachi/angular-exportexcel-example.git// install and start the project
npm install
npm start

điều kiện tiên quyết

Có một số điều kiện tiên quyết cho hướng dẫn này. Bạn cần tạo một dự án Angular với Angular CLI và cần cài đặt các gói npm xlxs và

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

0

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

Hãy tạo một bảng cơ bản và điền vào một số dữ liệu giả

ng g c customers

khách hàng. thành phần. html

Tạo mảng khách hàng trong phương thức vòng đời ngOnInit() của thành phần ứng dụng và chuyển nó cho thành phần khách hàng như bên dưới

thành phần ứng dụng

Triển khai với Chỉ thị Thành phần

Trong phần này, chúng ta sẽ xem cách chúng ta có thể triển khai chức năng xuất này với các dịch vụ và chỉ thị thành phần

Một thành phần là một lệnh với một mẫu và nó là phổ biến nhất

Hãy tạo một dịch vụ có một phương thức công khai lấy dữ liệu JSON làm đầu vào và xuất dưới dạng excel với sự trợ giúp của

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

1 và

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

2

ng g s _services/export

xuất khẩu. dịch vụ. ts

Hãy nhập và đưa phần này vào thành phần ứng dụng và gọi phương thức

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

3 bất cứ khi nào chúng ta nhấp vào nút xuất. Chúng tôi thực sự đang điền dữ liệu vào mảng khách hàng khi tải theo phương pháp vòng đời

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

0

ứng dụng. thành phần. ts

Với mã này tại chỗ khi bạn nhấp vào nút xuất, dữ liệu JSON được tải xuống dưới dạng excel

html thành phần ứng dụng

Thực hiện với chỉ thị thuộc tính

Trong phần này, chúng ta sẽ xem cách chúng ta có thể triển khai chức năng xuất bằng chỉ thị thuộc tính

Chỉ thị thuộc tính là chỉ thị thay đổi hình thức hoặc hành vi của một phần tử, thành phần hoặc chỉ thị khác

Hãy tạo một lệnh có tên là

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

1 và nhập lệnh đó vào

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

2 và thêm lệnh đó vào mảng khai báo

ng g d _directives/export

ứng dụng. mô-đun. ts

Đây là lệnh xuất với HostListener lắng nghe sự kiện nhấp chuột và lấy mảng khách hàng và tên tệp làm đầu vào. ExportService được đưa vào hàm tạo của lệnh và được sử dụng khi sự kiện nhấp chuột xảy ra

xuất khẩu. chỉ thị. ts

Trong mẫu thành phần, Bạn cần xóa chức năng đã thêm trước đó và thêm chỉ thị thuộc tính này với các đầu vào như bên dưới. Vì tên bộ chọn chỉ thị và tên bí danh đầu vào là appExport, nên chúng tôi có thể chuyển trực tiếp khách hàng tới chỉ thị

// generate angular project
ng new // install required dependencies
npm install ngx-bootstrap xlsx file-saver --save

3 và tên tệp dưới dạng một thuộc tính riêng biệt

ứng dụng. thành phần. html

Khi đã có mã ở trên, bạn có thể kiểm tra mã này bằng chức năng tải xuống và bạn có thể thấy đầu ra tương tự như phương pháp trước đó

so sánh

Chúng tôi đã thấy hai phương pháp xuất chức năng. BẠn nên chọn cái nào?

Nếu ứng dụng đủ đơn giản và có chức năng xuất này ở một nơi, chúng ta có thể chọn triển khai nó bằng chỉ thị thành phần

Nếu ứng dụng đủ lớn và yêu cầu chức năng xuất này ở nhiều nơi, chúng tôi có thể chọn triển khai nó bằng chỉ thị thuộc tính

Vấn đề với chỉ thị thành phần là chúng ta cần thêm cả lớp mẫu và lớp thành phần để triển khai chức năng này. Với chỉ thị thuộc tính, chúng ta chỉ cần thêm bộ chọn đó vào mẫu mà thôi

Với chỉ thị thành phần, dịch vụ xuất khẩu được gắn với lớp thành phần. Ví dụ: nếu bạn muốn triển khai chức năng xuất trong nhiều thành phần, bạn cần đưa dịch vụ xuất vào mọi thành phần

Tóm lược

• Chúng tôi cần lib

  // generate angular project
  ng new // install required dependencies
  npm install ngx-bootstrap xlsx file-saver --save

  1 và

  // generate angular project
  ng new // install required dependencies
  npm install ngx-bootstrap xlsx file-saver --save

  0 để triển khai chức năng xuất trong Angular
• Triển khai logic xuất với dịch vụ Góc để có thể sử dụng lại và cũng có thể được đưa vào cả chỉ thị thành phần và thuộc tính
• Triển khai với chỉ thị Thành phần nếu ứng dụng của bạn đơn giản và chức năng xuất của bạn được yêu cầu tại một nơi
• Triển khai với Chỉ thị thuộc tính nếu ứng dụng của bạn lớn và chức năng xuất của bạn được yêu cầu ở nhiều nơi

Phần kết luận

Tốt hơn là sử dụng chỉ thị thuộc tính nếu bạn muốn triển khai chức năng này ở nhiều nơi

Làm cách nào để xuất dữ liệu từ Angular sang Excel?

Làm cách nào để chuyển đổi CSV sang Excel trong Angular?

Làm cách nào để chuyển đổi dữ liệu JSON sang Excel trong Angular?

Làm cách nào để xuất bảng HTML sang Excel trong Angular?