Làm cách nào để đọc dữ liệu từ tệp excel trong JavaScript?

JavaScript là một nền tảng linh hoạt cho phép dễ dàng tùy chỉnh các công cụ viết kịch bản phía máy khách. Trong một số ứng dụng, thật hữu ích khi có một số loại giao diện bảng tính dễ viết mã và bảo trì. Thành phần bảng tính JavaScript phía máy khách của SpreadJS là hoàn hảo cho việc này

Thêm bảng tính JavaScript hoàn chỉnh vào ứng dụng web doanh nghiệp của bạn. Tải xuống SpreadJS ngay bây giờ

Trong blog này, chúng tôi sẽ giới thiệu cách nhập/xuất sang Excel bằng JavaScript theo các bước sau

Thiết lập Dự án Bảng tính JavaScript

Để bắt đầu, chúng ta có thể sử dụng các tệp SpreadJS được lưu trữ trên NPM. Để làm điều này, chúng ta có thể cài đặt bằng đối số dòng lệnh. Mở một dấu nhắc lệnh và điều hướng đến vị trí của ứng dụng của bạn. Ở đó, bạn có thể cài đặt các tệp cần thiết bằng một lệnh

Trong trường hợp này, chúng tôi cần thư viện Bảng tính cơ sở, Spread-ExcelIO và jQuery

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery

SpreadJS không phụ thuộc vào jQuery, nhưng trong trường hợp này, chúng tôi sử dụng nó để hỗ trợ yêu cầu nguồn gốc dễ dàng, chúng tôi sẽ xem xét sau

Sau khi chúng được cài đặt, chúng tôi có thể thêm các tham chiếu đến các tệp script và CSS đó trong mã của mình

  
  
  
    SpreadJS ExcelIO
    
    

    
    
    

  
  
      
  
  

Chúng tôi cũng sẽ cần thư viện FileSaver mà chúng tôi đã nhập ngoài tệp SpreadJS và jQuery

Sau đó, chúng ta có thể thêm một tập lệnh vào trang khởi tạo Spread. Thành phần trang tính và một phần tử div để chứa nó (vì thành phần bảng tính SpreadJS sử dụng canvas, điều này là cần thiết để khởi tạo thành phần)

Thêm mã nhập Excel

Chúng ta cần tạo một phiên bản của thành phần ExcelIO phía máy khách mà chúng ta có thể sử dụng để mở tệp

var excelIO = new GC.Spread.Excel.IO();  

Sau đó, chúng ta cần thêm một chức năng để nhập tệp. Trong ví dụ này, chúng tôi nhập tệp cục bộ, nhưng bạn có thể thực hiện điều tương tự với tệp trên máy chủ. Bạn cần tham khảo vị trí nếu nhập tệp từ máy chủ. Sau đây là một ví dụ về phần tử đầu vào nơi người dùng có thể nhập vị trí của tệp

Khi bạn có điều đó, bạn có thể truy cập trực tiếp giá trị đó trong mã tập lệnh

var excelUrl = $("#importUrl").val();  

Đoạn mã sau cho hàm nhập sử dụng tệp cục bộ cho biến "excelUrl"

function ImportFile() {  
    var excelUrl = "./test.xlsx";  

    var oReq = new XMLHttpRequest();  
    oReq.open('get', excelUrl, true);  
    oReq.responseType = 'blob';  
    oReq.onload = function () {  
        var blob = oReq.response;  
        excelIO.open(blob, LoadSpread, function (message) {  
            console.log(message);  
        });  
    };  
    oReq.send(null);  
}  
function LoadSpread(json) {  
    jsonData = json;  
    workbook.fromJSON(json);  

    workbook.setActiveSheet("Revenues (Sales)");  
}  

Cho dù bạn đang tham chiếu một tệp trên máy chủ hay cục bộ, bạn sẽ cần thêm phần sau vào tập lệnh của mình bên trong $(document). chức năng sẵn sàng

$(document).ready(function () {  
    $.support.cors = true;  
    workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
    //..  
});  

Trong trường hợp này, chúng tôi cần bật Hỗ trợ yêu cầu nguồn gốc chéo vì chúng tôi có khả năng tải tệp từ một URL. Do đó, $. ủng hộ. cors = đúng;

Thêm dữ liệu vào tệp Excel đã nhập

Chúng tôi nhập tệp cục bộ bằng cách sử dụng mẫu Excel “Báo cáo lỗ lãi” cho hướng dẫn này

Bây giờ chúng ta có thể sử dụng Spread. Tập lệnh trang tính để thêm một dòng doanh thu khác vào tệp này. Hãy thêm một nút vào trang sẽ làm việc đó

Add Revenue  

Chúng ta có thể viết một hàm cho trình xử lý sự kiện nhấp chuột cho nút đó để thêm một hàng và sao chép kiểu từ hàng trước đó để chuẩn bị thêm một số dữ liệu. Để sao chép kiểu, chúng ta sẽ cần sử dụng hàm copyTo và chuyển vào

• chỉ số hàng và cột gốc và đích
• số hàng và số cột
• giá trị CopyToOptions cho phong cách

Mã tập lệnh sau để thêm dữ liệu và Sparkline sẽ được chứa trong trình xử lý sự kiện bấm vào nút này. Đối với hầu hết dữ liệu, chúng ta có thể sử dụng hàm setValue. Điều này cho phép chúng tôi đặt một giá trị trong một trang tính trong Trải rộng bằng cách chuyển vào một chỉ mục hàng, chỉ mục cột và giá trị

sheet.setValue(newRowIndex, 1, "Revenue 8");  

for (var c = 3; c < 15; c++) {  
    sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);  
}  

Đặt công thức SUM trong cột P để khớp với các hàng khác và đặt tỷ lệ phần trăm cho cột Q

Cuối cùng, chúng ta có thể sao chép công thức từ các hàng trước đó sang hàng mới cho các cột từ R đến AD bằng cách sử dụng lại hàm copyTo, lần này là sử dụng CopyToOptions. công thức

Thêm một biểu đồ thu nhỏ

Bây giờ chúng ta có thể thêm một biểu đồ thu nhỏ để khớp với các hàng dữ liệu khác. Để làm điều này, chúng tôi cần cung cấp một dải ô để lấy dữ liệu và một số cài đặt cho biểu đồ thu nhỏ. Trong trường hợp này, chúng ta có thể chỉ định

• phạm vi ô, chúng tôi vừa thêm dữ liệu vào
• cài đặt để làm cho biểu đồ thu nhỏ trông giống như các biểu đồ thu nhỏ khác trong cùng một cột

Sau đó, chúng tôi gọi phương thức setSparkline và chỉ định

• một vị trí cho sparkline
• vị trí của dữ liệu
• định hướng của tia lửa điện
• loại tia lửa
• các cài đặt chúng tôi đã tạo

Nếu bạn thử chạy mã ngay bây giờ, nó có vẻ hơi chậm vì sổ làm việc đang sơn lại mỗi khi dữ liệu được thay đổi và kiểu được thêm vào. Để tăng tốc đáng kể và tăng hiệu suất, Trải rộng. Trang tính cung cấp khả năng tạm dừng sơn và dịch vụ tính toán. Hãy thêm mã để tạm dừng cả hai trước khi thêm một hàng và dữ liệu của nó rồi tiếp tục cả hai sau đó

Khi chúng tôi thêm mã đó, chúng tôi có thể mở trang trong trình duyệt web và xem tệp Excel tải vào Spread. Các trang tính có hàng doanh thu được thêm vào. Quan trọng. Hãy nhớ rằng Chrome không cho phép bạn mở tệp cục bộ vì mục đích bảo mật, vì vậy bạn cần sử dụng trình duyệt web như Firefox để chạy mã này thành công. Ngoài ra, tải tệp từ URL của trang web sẽ mở tốt trong mọi trình duyệt

Thêm mã xuất Excel

Cuối cùng, chúng ta có thể thêm một nút để xuất tệp với hàng đã thêm. Để làm điều này, chúng ta có thể sử dụng mã ExcelIO phía máy khách được tích hợp trong Spread. trang tính

Mã đó lấy tên tệp xuất từ ​​phần tử đầu vào exportFileName. Chúng tôi có thể xác định nó và cho phép người dùng đặt tên cho tệp như vậy

Sau đó, chúng ta có thể thêm một nút gọi chức năng này

Khi bạn thêm một hàng doanh thu, bạn có thể xuất tệp bằng nút Xuất tệp. Đảm bảo thêm thư viện bên ngoài FileSaver để cho phép người dùng lưu tệp ở nơi họ muốn

Khi tệp được xuất thành công, bạn có thể mở tệp đó trong Excel và thấy rằng tệp trông giống như khi nó được nhập, ngoại trừ hiện có một dòng doanh thu bổ sung mà chúng tôi đã thêm

Đây chỉ là một ví dụ về cách bạn có thể sử dụng bảng tính JavaScript của SpreadJS để thêm dữ liệu vào tệp Excel của mình và sau đó xuất chúng trở lại Excel bằng mã JavaScript đơn giản

Tải mẫu tại đây

Trong một loạt bài viết khác, chúng tôi trình bày cách nhập/xuất bảng tính Excel trong các khung Javascript khác

Làm cách nào để đọc dữ liệu từ Excel trong JavaScript?

Làm cách nào để đọc dữ liệu từ Excel trong Selenium JavaScript?

JavaScript có thể tương tác với Excel không?

Làm cách nào để mở tệp Excel trong trình duyệt bằng JavaScript?