Mở excel trong trình duyệt bằng javascript

Trong bài trước, tôi đã giải thích cách chúng ta có thể đọc tệp csv bằng trình đọc tệp javascript và HTML 5, bây giờ trong bài đăng này, tôi đã giải thích cách chúng ta có thể sử dụng thư viện bên ngoài như xlsx để phân tích hoặc đọc tệp excel bằng javascript và hiển thị nội dung của nó trong . Khi tệp được tải lên bằng Javascript, ban đầu tệp được đọc dưới dạng chuỗi nhị phân, sau đó dữ liệu nhị phân được đọc bằng plugin xlsx

Đọc XLSX bằng Javascript

Hãy bắt đầu bằng cách thêm đầu vào tệp HTML đơn giản và nút để tải tệp lên

Tôi cũng đã bao gồm div HTML trống để tạo bảng bên trong nó từ tệp Excel của chúng tôi

Bây giờ, chúng ta sẽ tạo hàm upload tệp và xử lý tệp Excel để lấy dữ liệu từ tệp đó và chuyển thành bảng HTML

Trong mã Javascript ở trên, trước tiên chúng tôi thêm các tham chiếu của tệp plugin XLSX và sau đó thêm hai chức năng

1. Quy trình tải lên. Tải lên tệp khi nhấp vào nút và chuyển đổi nó thành dữ liệu Nhị phân, nó cũng kiểm tra xem Trình duyệt có phải là IE hay không rồi xử lý tương ứng để chuyển đổi tệp thành nhị phân
2. Quy trìnhExcel. hàm này lấy dữ liệu nhị phân, đọc tên Trang tính, tạo phần tử Bảng và nối từng hàng trong đó

Tôi đã giải thích các dòng mã bằng Comment

Giả sử tệp Excel mẫu của chúng tôi trông như thế này

Vì vậy, nếu sử dụng đoạn mã trên trong HTML/Javascript, đầu ra sẽ như bên dưới

Đây là liên kết fiddle https. //jsfiddle. mạng/abj98oxf/3/

Đọc tệp XLS bằng Javascript

Theo một cách tương tự, chúng ta có thể đọc. xls (excel) và hiển thị nó trong bảng HTML, tôi sẽ lặp lại cùng một mã, chỉ khác một vài dòng mã, chúng tôi cũng sẽ sử dụng plugin khác trong đó dành cho. xls

Mã tải lên tệp XLS giống như. XLSX một là, đây là những thay đổi

1. Chúng tôi đã bao gồm tệp plugin JS khác biệt
2. Thay đổi một vài dòng mã cho chức năng "GetTableFromExcel"

          //Read the Excel File data in binary
            var cfb = XLS.CFB.read(data, {type: 'binary'});
           var workbook = XLS.parse_xlscfb(cfb);
    
           //get the name of First Sheet.
           var Sheet = workbook.SheetNames[0];
    
           //Read all rows from First Sheet into an JSON array.
           var excelRows = XLS.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);?

Phần còn lại của mã vẫn giữ nguyên

Đây là liên kết fiddle làm việc. https. //jsfiddle. net/y3tx8wk4/1/

Ghi chú. Bạn cần phải vượt qua. xls trong mã này để làm cho nó hoạt động

Chuyển đổi Excel sang JSON bằng Javascript

Bạn cũng có thể tải lên excel và sau đó chuyển đổi nó thành dữ liệu JSON và tiếp tục với nó

Đây là câu đố. https. //jsfiddle. net/aszchkr0/ sử dụng mà bạn có thể kiểm tra đoạn mã trên, chỉ để tìm kiếm tệp excel và khi giá trị được thay đổi, bạn sẽ tìm thấy kết quả JSON trong vùng văn bản

Trong đoạn mã trên, chúng tôi đang đọc excel bằng cách sử dụng plugin XLSX, sau đó chúng tôi lặp qua từng trang tính và nhận đối tượng hàng XL và tiếp tục chuyển đổi nó thành JSON

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

document.getElementById("addRevenue").onclick = function () {  
    var sheet = workbook.getActiveSheet();  
    sheet.addRows(newRowIndex, 1);  
    sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);  
}  

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 để mở tệp Excel trong trình duyệt bằng JavaScript?

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

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

Làm cách nào để mở tệp Excel khi nhấp vào nút trong JavaScript?