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
tạo ứng dụng phản ứng
b] Di chuyển đến vị trí dự án
di chuyển vị trí dự án
c] Để chạy Ứng dụng, hãy đưa ra lệnh như
bắt đầu ứng dụng phản ứng
Giao diện người dùng mặc định cho dự án JS phản ứng
máy chủ cục bộ. 3000
Bước 2. Để cài đặt các mô-đun nút cho Excel Export
Sử dụng các lệnh sau để cài đặt các mô-đun nút
a] npm cài đặt kiểu sheetjs
Bạn cũng có thể tham khảo các lệnh được đề cập trong liên kết dưới đây
kiểu sheetjs
hỗ trợ đặt kiểu ô cho sheetjs. API giống như sheetjs. npm cài đặt kiểu sheetjs Vui lòng đọc SheetJs…
www. npmjs. com
b] npm cài đặt trình tiết kiệm tệp
Bạn cũng có thể tham khảo các lệnh được đề cập trong liên kết dưới đây
trình tiết kiệm tệp
Nếu bạn cần lưu các tệp thực sự lớn lớn hơn giới hạn kích thước của blob hoặc không có đủ RAM, thì hãy có…
www. npmjs. com
Bước 3. Tạo mã linh kiện xuất excel
a] Tạo một “Excel Export. js” trong thư mục “src” Dự án xuất Excel
b] Nhập thư viện trình tiết kiệm tệp
c] Nhập thư viện kiểu sheetjs
a] Tạo hàm ExportExcel
Trong hàm xuất excel này, fileType là kiểu định dạng của tệp xuất và fileExtension là kiểu mở rộng của tệp xuất
Bước 4. Tạo dữ liệu JSON
Bước 5. Bao gồm thành phần xuất excel trong Ứng dụng. tập tin js
bao gồm Thành phần ExcelExport
Trong Thành phần ExportExcel để chuyển giá trị tham số excelData dưới dạng ExcelExportData và tham số fileName dưới dạng Excel Export
Bước 6. Tải xuống dữ liệu excel
Nhấp vào nút xuất excel để xuất dữ liệu json ở định dạng excel
Nhấp vào nút Xuất Excel
Bảng Excel đã xuất cuối cùng
Bảng Excel đã xuất
mã mẫu
xuất sắc. js
xuất sắc. js
Ứng dụng. js
Ứng dụng. js
Bằng cách làm theo các bước trên để đạt được xuất Excel trong phản ứng JS
-bởi Dineshkumar Lakshmanan
Về chúng tôi
Được thành lập vào năm 2016, với mục tiêu trở thành công ty là sự lựa chọn đúng đắn của khách hàng, nhân tài và nhà cung cấp giải pháp. Chúng tôi thiết kế, phát triển và tích hợp các ứng dụng phần mềm để đáp ứng những thách thức của môi trường kinh doanh năng động phù hợp với nhu cầu của khách hàng. Ngày nay, chúng tôi là một trong những nhà cung cấp dịch vụ phần mềm đang phát triển trong ngành nhằm cung cấp sự phát triển ứng dụng tùy chỉnh và giải pháp kỹ thuật phù hợp. Nhóm của chúng tôi mong muốn thực hiện công việc có chất lượng cho khách hàng của mình trong việc cung cấp các giải pháp và dịch vụ từ đầu đến cuối với giá cả phải chăng
Chủ đề của ngày hôm nay là về
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'];
0Cộ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'];
1Tiê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'];
2Lặ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'];
3Nế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'];
4Hà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'];
5Thê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'];
6Thê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'];
7Thê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'];
8Lặ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'];
9Lặ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 exceljs0
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'];
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 exceljs1
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'];
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 exceljs2
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'];
Đâ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 exceljs3
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'];
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 exceljs4
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'];
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 exceljs5
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'];
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 exceljs6
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'];
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 exceljs7
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'];
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 exceljs8
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'];
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 exceljs9
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'];
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