Cách sử dụng exceljs trong phản ứng

React là một thư viện JavaScript để xây dựng giao diện người dùng. React được sử dụng để xây dựng các ứng dụng một trang. React cho phép chúng tôi tạo các thành phần giao diện người dùng có thể tái sử dụng

Chức năng Xuất Excel như thế nào?

Khi xuất dữ liệu sang Excel, trước tiên hãy tạo tệp json, sau đó chuyển đổi tệp json sang định dạng Excel bằng thành phần xuất excel

Để thực hiện điều này, hãy thực hiện các bước sau

1. Tạo dự án Js phản ứng

2. Cài đặt các mô-đun nút cho Excel Export

3. Tạo thành phần xuất Excel

4. Tạo dữ liệu JSON

5. Bao gồm thành phần xuất excel trong Ứng dụng. tập tin js

6. Tải xuống dữ liệu excel

Bước 1. Tạo dự án JS phản ứng

Sử dụng các lệnh sau để tạo dự án JS phản ứng mới

a) ứng dụng npx tạo-phản ứng-ứng dụng của tôi

https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js" integrity="sha512-UnrKxsCMN9hFk7M56t4I4ckB4N/2HHi0w/7+B/1JsXIX3DmyBcsGpT3/BsuZMZf+6mAr0vP81syWtfynHJ69JA==" crossorigin="anonymous" referrerpolicy="no-referrer">4, gói JavaScript hoạt động như trình quản lý sổ làm việc Excel. Dựa trên tài liệu chính thức,

4 là một gói

… đọc, thao tác và ghi dữ liệu và kiểu bảng tính vào XLSX và JSON

Thiết kế ngược từ các tệp bảng tính Excel dưới dạng dự án

Đây là một gói cực kỳ hữu ích cung cấp các tính năng sau

• Tạo sổ làm việc
• Tạo trang tính
• Xử lý đầu trang và chân trang
• Đặt chế độ xem cố định hoặc chia nhỏ
• Đặt bộ lọc tự động
• Thao tác dữ liệu trên hàng và cột
• Thêm xác thực dữ liệu
• Thêm phong cách
• Chèn hình ảnh vào sổ làm việc

Ngoài ra,

4 thường xuyên được cập nhật theo thời gian và miễn phí. Hướng dẫn này bao gồm quy trình cài đặt từng bước và một số ví dụ về một số tính năng cơ bản và thường được sử dụng. Ngoài ra, các đoạn mã sẽ được cung cấp để tham khảo cho người đọc

Hãy chuyển sang phần tiếp theo và bắt đầu cài đặt

4

Thành lập

Quá trình cài đặt được đề xuất là ________ 08 chủ yếu hoạt động cho nút. dự án js. Nếu bạn có ý định sử dụng nó trực tiếp trong trình duyệt dành cho người không có nút. js, bạn phải nhập gói bằng liên kết CDN chính thức. Chúng ta hãy xem quá trình cài đặt cho cả hai phương pháp

npm

Chạy lệnh sau để cài đặt nó trong dự án của bạn

npm install exceljs

Sau đó, bạn chỉ cần nhập nó như sau

const ExcelJS = require('exceljs');

Đối với nút. js cũ hơn 10, bạn phải nhập bằng mã dịch mã ES5. Ngoài ra, bạn cũng cần nhập một vài polyfill

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

CDN

Để sử dụng nó trực tiếp trên trình duyệt của bạn, chỉ cần truy cập trang CDN chính thức cho exceljs và sao chép thẻ tập lệnh tương ứng dựa trên nhu cầu của bạn

exceljs — Thư viện — cdnjs — CDN mã nguồn mở và miễn phí số 1 được xây dựng để giúp cuộc sống của…

Trình quản lý sổ làm việc Excel — Đọc và ghi tệp xlsx và csv. - Giản dị. Nhanh. Đáng tin cậy. Phân phối nội dung ở mức tốt nhất…

cdnjs. com

Ví dụ: bạn có thể sử dụng thẻ script sau bên trong tệp HTML của mình

(Tùy chọn) FileSaver. js

Đối với thông tin của bạn, một số tính năng trong

4 phụ thuộc nhiều vào nút. gói tích hợp js. Ví dụ: chức năng lưu tệp yêu cầu mô-đun

00. Điều này sẽ gây ra lỗi khi bạn gọi nó trong không phải nút. dự án js

Phải nói rằng, bạn vẫn có thể đạt được tính năng lưu tệp chỉ bằng một vài thủ thuật bổ sung. Tất cả những gì bạn cần làm là xuất dữ liệu nhị phân dưới dạng bộ đệm và lưu nó bằng thư viện JavaScript bên ngoài, chẳng hạn như FileSaver. js. Truy cập kho lưu trữ sau và sao chép thẻ tập lệnh dựa trên các trường hợp sử dụng của bạn

FileSaver. js — Thư viện — cdnjs — CDN mã nguồn mở và miễn phí số 1 được xây dựng để giúp cuộc sống của…

Triển khai FileSaver HTML5 saveAs(). - Giản dị. Nhanh. Đáng tin cậy. Phân phối nội dung ở mức tốt nhất. cdnjs là một phần mềm miễn phí…

cdnjs. com

Sau đó, chỉ cần chèn thẻ script vào HTML của bạn như sau

0

Sách bài tập

Trong phần này, bạn sẽ học các khái niệm cơ bản và những điều cơ bản đằng sau

4

Tạo sổ làm việc mới

Hãy bắt đầu bằng cách tạo một sổ làm việc mới như sau

3

Thuộc tính sổ làm việc

Khi bạn có một sổ làm việc, bạn có thể thử một số thuộc tính của nó

4

bảng tính

Thêm trang tính mới

Tiếp theo, bạn có thể thêm một trang tính mới vào sổ làm việc mà bạn đã tạo trước đó thông qua đoạn mã sau

5

Cài đặt trang tính

Bạn cũng có thể khởi tạo một số cấu hình cho trang tính của mình bằng cách chuyển vào một đối tượng

Ngoài ra, bạn có thể đặt cấu hình theo cách thủ công sau khi bạn đã khởi tạo đối tượng trang tính. Ví dụ bạn có thể đặt footer cho trang lẻ như sau

6

&P và &N là một phần của lệnh script. Vui lòng kiểm tra liên kết sau để biết thêm thông tin về điều này

Bộ lọc tự động

Hơn nữa, cũng có hỗ trợ cho các bộ lọc tự động. Đoạn mã sau đặt bộ lọc tự động từ A1 thành C1

7

Thay vào đó, bạn có thể sử dụng mã sau rõ ràng hơn rất nhiều so với mẫu chuẩn

const ExcelJS = require('exceljs');

0

Cột

Đó là một cách thực hành tốt để đặt các cột có tiêu đề và khóa ánh xạ tương ứng

const ExcelJS = require('exceljs');

1

Tiêu đề đại diện cho văn bản sẽ được hiển thị trong khi khóa đại diện cho ánh xạ tên thuộc tính khi bạn thêm một hàng mới bằng cách sử dụng một đối tượng. Xin lưu ý rằng thứ tự rất quan trọng vì nó sẽ ảnh hưởng đến kết quả cuối cùng khi bạn lưu sổ làm việc dưới dạng tệp excel

Truy cập cột

Bạn có thể truy cập từng cột riêng lẻ thông qua

• 02 — khóa ánh xạ được khai báo khi tạo cột (id, name, age, v.v. )

• 03 — chữ cái tương ứng cho cột (A, B, C, v.v. )

• 04 — số chỉ mục (bắt đầu từ 1)

const ExcelJS = require('exceljs');

2

Lặp lại từng ô

Bạn có thể dễ dàng lặp lại tất cả các ô hiện tại trong cột không trống

const ExcelJS = require('exceljs');

3

Nếu bạn muốn lặp lại các ô trống, chỉ cần đặt thuộc tính

05 thành

06 như sau

const ExcelJS = require('exceljs');

4

Hàng ngang

Khi bạn đã khai báo các cột tương ứng, bạn có thể bắt đầu thêm dữ liệu vào đó bằng cách gọi hàm

07. Có nhiều cách để thêm hàng vào trang tính

Thêm một hàng mới bằng đối tượng khóa-giá trị

Ví dụ: bạn có thể chuyển đối tượng khóa-giá trị khớp với các cột tiêu đề

const ExcelJS = require('exceljs');

5

Thêm một hàng mới bằng cách sử dụng mảng

Bạn cũng có thể sử dụng một mảng để thêm dữ liệu mới. Nó sẽ gán cho các cột theo thứ tự (A, B, C)

const ExcelJS = require('exceljs');

6

Thêm hàng dữ liệu

Ngoài ra, thay vào đó, bạn có thể gọi hàm

08 và chuyển vào một mảng các đối tượng hàng. Điều này rất hữu ích để thêm các hàng dữ liệu chỉ trong một dòng mã

const ExcelJS = require('exceljs');

7

Thêm ngắt trang

Ngoài ra còn có một chức năng gọi là

09 để thêm ngắt trang mới bên dưới hàng. Bạn có thể gọi nó như sau

const ExcelJS = require('exceljs');

8

Lặp lại từng hàng

Bạn có thể dễ dàng đi qua từng hàng bằng cách sử dụng hàm

30 trên trang tính của mình

const ExcelJS = require('exceljs');

9

Lặp lại từng hàng

Tương tự như cột, bạn có thể lặp qua từng ô của hàng thông qua cách sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

0

số liệu

Có một số chỉ số tích hợp để lấy số lượng hàng và tổng số ô

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

1

Xác nhận dữ liệu

Bạn có thể dễ dàng kết hợp xác thực dữ liệu vào trang tính của mình theo chương trình thông qua

31. Ví dụ: bạn có thể đặt danh sách thả xuống với danh sách các giá trị thông qua đoạn mã sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

2

Đây là một ví dụ khác giới hạn đầu vào ở giữa 2. 5 và 7. Bạn có thể thêm thông báo chú giải công cụ để hướng dẫn người dùng bằng cách đặt thuộc tính

32

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

3

Phong cách

4 hỗ trợ tập hợp kiểu dáng và định dạng phong phú cho các ô, hàng và cột. Tại thời điểm viết bài này, nó đi kèm với các thuộc tính sau

• numFmt
• nét chữ
• căn chỉnh
• biên giới
• lấp đầy

định dạng

Bạn có thể dễ dàng định dạng số như sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

4

Với ngoại lệ duy nhất cho

34 chấp nhận một chuỗi, phần còn lại của phong cách lấy một đối tượng JavaScript

Nét chữ

Ví dụ: bạn có thể đặt phông chữ thông qua đoạn mã sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

5

căn chỉnh

Mặt khác, bạn có thể dễ dàng căn lề trên cùng bên phải như sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

6

Ngoài ra, bạn có thể đặt căn chỉnh cho dòng văn bản và thụt lề thông qua đoạn mã sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

7

Biên giới

Để tạo kiểu cho đường viền của ô dựa trên màu mong muốn của bạn, hãy sử dụng đoạn mã sau để thay thế

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

8

Thuộc tính kiểu bên dưới chấp nhận

• gầy
• say mê
• đi thẳng
• tóc
• dấu gạch ngangDotDot
• nghiêngDashDot
• trung bìnhDashed
• trung bìnhDashDotDot
• trung bìnhDashDot
• vừa phải
• kép
• đặc

lấp đầy

Để điền vào một ô cụ thể, chỉ cần chuyển vào một đối tượng có thuộc tính sau

// polyfills required by exceljs
require('core-js/modules/es.promise');
require('core-js/modules/es.string.includes');
require('core-js/modules/es.object.assign');
require('core-js/modules/es.object.keys');
require('core-js/modules/es.symbol');
require('core-js/modules/es.symbol.async-iterator');
require('regenerator-runtime/runtime');const ExcelJS = require('exceljs/dist/es5');

9

35 đề cập đến màu nền trước trong khi

36 đề cập đến màu phụ trợ

Danh sách đầy đủ cho các loại mẫu như sau

• không ai
• chất rắn
• màu xám đen
• trung bìnhXám
• xám nhạt
• xám125
• xám0625
• tốiNgang
• tốiDọc
• bóng tối
• tốiUp
• lưới tối
• bóng tốiTrellis
• ánh sáng Ngang
• ánh sángDọc
• ánh sáng xuống
• chiếu sáng
• ánh sángLưới
• ánh sángTrellis

Di sản

Xin lưu ý rằng khi bạn đặt một kiểu cụ thể cho một hàng hoặc cột, exceljs sẽ áp dụng cùng một kiểu cho tất cả các ô hiện có trong hàng hoặc cột đó. Các ô mới được tạo cũng sẽ kế thừa kiểu

Do đó, bạn nên thêm các ô trước khi đặt kiểu. Đoạn mã sau minh họa một ví dụ về đặt tất cả các tiêu đề thành đậm sau khi tạo ô

0

Để biết thêm thông tin về các phong cách, vui lòng kiểm tra liên kết sau

Tập tin vào/ra

4 cung cấp một vài chức năng trợ giúp để đọc và tải tệp tùy thuộc vào trường hợp sử dụng. Nói chung, nó được phân loại thành

• tập tin
• dòng
• đệm

Xin lưu ý rằng các hoạt động liên quan đến File I/O trả về một

38 và phải được gọi cùng với từ khóa

39. Nếu bạn đang sử dụng nó bên trong một chức năng, hãy đảm bảo đặt chức năng đó thành

40

Tập tin

Giả sử bạn có một tệp excel cục bộ, bạn có thể thực hiện đọc và ghi như sau

1

Dòng

Nếu bạn có một luồng dữ liệu, hãy sử dụng đoạn mã sau

2

Đệm

Khi xử lý bộ đệm, thay vào đó, bạn nên gọi hàm

41 và

42

3

Dưới đây là một ví dụ về đọc tệp excel đã tải lên.

43 là một đối tượng

44 được lấy từ thẻ

45. Chỉ cần khởi tạo một Blob mới và lấy bộ đệm bên dưới. Sau đó, chuyển nó tới hàm

41 như sau

File I/O cho non-node. dự án js

Như đã đề cập trước đó, các chức năng đọc và ghi tệp phụ thuộc vào mô-đun

00 sẽ gây ra lỗi nếu bạn đang sử dụng nó trên trình duyệt. Để giải quyết vấn đề này, chỉ cần gọi hàm

42 và lưu dữ liệu bộ đệm đầu ra vào Blob. Sau đó, lưu nó bằng FileSaver. js

Đảm bảo rằng bạn đã nhập thẻ

49 thích hợp cho FileSaver. js. Vui lòng kiểm tra phần cài đặt để biết thêm thông tin về điều này

Sự kết luận

Hãy tóm tắt những gì bạn đã học được ngày hôm nay

Bài viết này bắt đầu với phần giới thiệu ngắn gọn về các tính năng của

4

Tiếp theo, nó đề cập đến quá trình cài đặt bao gồm các bước thiết lập bổ sung cho không phải nút. dự án js

Nó tiếp tục với phần giải thích chuyên sâu về giao diện và các chức năng tích hợp do exceljs cung cấp. Điều này bao gồm xử lý sổ làm việc, trang tính, kiểu dáng, v.v.

Cuối cùng, nó nói về hỗ trợ Tệp I/O chẳng hạn như đọc và ghi sổ làm việc vào một tệp, luồng hoặc bộ đệm

Việc sử dụng Exceljs là gì?

Exceljs có miễn phí không?

Exceljs có hỗ trợ XLS không?

Chúng tôi có thể đọc tệp Excel bằng JavaScript không?