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 Show
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
Đây là một gói cực kỳ hữu ích cung cấp các tính năng sau
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 npmChạ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 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ớiHã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ệcKhi 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ớiTiế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ínhBạ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ộtBạn có thể truy cập từng cột riêng lẻ thông qua
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ảngBạ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ệuNgoà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 trangNgoà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àngBạ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àngTươ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 số liệuCó một số chỉ số tích hợp để lấy số lượng hàng và tổng số ô // polyfills required by exceljs1 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 Đâ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 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
định dạngBạn có thể dễ dàng định dạng số như sau // polyfills required by exceljs4 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 căn chỉnhMặ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 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 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 Thuộc tính kiểu bên dưới chấp nhận
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 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
Di sảnXin 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
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 tinGiả 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òngNếu bạn có một luồng dữ liệu, hãy sử dụng đoạn mã sau 2 ĐệmKhi 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 jsNhư đã đề 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 là một thư viện JavaScript để đọc, thao tác và ghi dữ liệu bảng tính ở định dạng XLSX .
Exceljs có miễn phí không?Ngoài ra, exceljs thường xuyên được cập nhật và có sẵn miễn phí .
Exceljs có hỗ trợ XLS không?exceljs không hỗ trợ xls , đây là định dạng độc quyền, cũ hơn. xlsx là một tiêu chuẩn mở và chỉ nén xml, rất dễ hỗ trợ.
Chúng tôi có thể đọc tệp Excel bằng JavaScript không?Trong JavaScript, chúng ta có thể thêm trình xử lý sự kiện vào các phần tử như thế này. Chúng ta có thể đọc dữ liệu trong tệp excel bằng cách sử dụng trình đọc tệp dưới dạng chuỗi nhị phân trong JavaScript . Sau đó, chúng tôi sử dụng XLSX có tiện ích SheetJS tích hợp để chuyển đổi chuỗi nhị phân của chúng tôi thành đối tượng JSON. |