Nhiều công ty dựa vào bảng tính, cụ thể là Microsoft Excel, để vận hành hoạt động kinh doanh. Dù là bảng tính nội bộ hay do khách hàng cung cấp, khả năng truy cập và/hoặc duy trì các bảng tính này trong ứng dụng JavaScript sau khi đưa lên web là rất quan trọng.
Blog này sẽ giới thiệu cách bạn có thể dễ dàng mở tệp Excel trong giao diện bảng tính quen thuộc, thực hiện thay đổi bằng mã hoặc cho phép người dùng chỉnh sửa, sau đó lưu lại thành tệp Excel bằng SpreadJS, một thành phần bảng tính JavaScript phía client phổ biến.
Tải xuống ứng dụng mẫu để làm theo blog
⚙️ Thiết Lập Dự Án Spreadsheet JavaScript
Để bắt đầu, ta có thể sử dụng các tệp SpreadJS được lưu trữ trên NPM. Công việc này có thể được thực hiện bằng việc cài đặt thông qua dòng lệnh. Mở command prompt và điều hướng đến thư mục ứng dụng của bạn. Tại đó, bạn có thể cài đặt các tệp cần thiết bằng một lệnh duy nhất.
Trong trường hợp này, ta cần thư viện Spread-Sheets, Spread-Sheets-IO và FileSaver:
npm install @mescius/spread-sheets npm install @mescius/spread-sheets-io npm install file-saver
Ta cần các thư viện SpreadJS base và IO. Ta cũng cần thư viện FileSaver, một thư viện bên ngoài giúp người dùng lưu file vào nơi họ muốn, được import cùng với các tệp của SpreadJS.
Sau khi cài đặt, ta có thể import các module JavaScript (và CSS) vào ứng dụng như sau:
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-io';
import 'file-saver';
Ta cần một phần tử HTML để chứa bảng tính JavaScript. Vì vậy, ta có thể thêm một thẻ div với ID vào mã HTML:
<div id="hostElement"></div>
Giờ ta có thể thêm đoạn mã khởi tạo thành phần SpreadJS Workbook sử dụng phần tử div này (vì SpreadJS sử dụng canvas, việc khởi tạo như vậy là cần thiết):
let workbook = new GC.Spread.Sheets.Workbook('hostElement');
Với các bước trên, ta đã tạo được bảng tính cơ bản bằng JavaScript.
📥 Thêm Mã để mở file Excel vào Ứng Dụng JavaScript
Ta cần thêm một phần tử input và một nút bấm để cho phép người dùng chọn tệp Excel (.XLSX). Ta có thể đặt accept=".xlsx" để người dùng chỉ được chọn tệp Excel:
<input type="file" id="selectedFile" accept=".xlsx" />
<button class="settingButton" id="btnImport">Import</button>
Sau đó, ta thêm hàm mở tệp sử dụng phương thức import của SpreadJS. Trong ví dụ này, ta sẽ mở tệp do người dùng chọn khi nhấn nút Import:
document.getElementById('btnImport').addEventListener('click', handleImport);
function handleImport(e) { let file = document.querySelector('#selectedFile').files[0]; if (!file) { return; } workbook.import(file);
}
Giờ đây, file Excel (.xlsx) có thể được import và hiển thị trong bảng tính JavaScript như sau:
📤 Thêm Mã lưu tệp Excel vào Ứng Dụng JavaScript
Cuối cùng, ta có thể thêm nút để lưu tệp với dòng dữ liệu đã thêm. Để xử lý việc này, ta gọi phương thức export tích hợp trong Spread.Sheets trong trình xử lý sự kiện click của nút Export:
document.getElementById('btnExport').addEventListener('click', handleExport);
function handleExport(e) { let fileName = document.getElementById('exportFileName').value; if (fileName.substr(-5, 5) !== '.xlsx') { fileName += '.xlsx'; } workbook.export(function (blob) { // save blob to a file saveAs(blob, fileName); }, function (e) { console.log(e); }, { fileType: GC.Spread.Sheets.FileType.excel });
}
Đoạn mã này lấy tên tệp từ phần tử input exportFileName. Ta có thể định nghĩa và cho phép người dùng đặt tên tệp như sau:
<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
Sau đó thêm nút để gọi hàm lưu tệp:
<button id="btnExport">Export File</button>
Khi bạn đã thêm dòng doanh thu, bạn có thể lưu tệp bằng nút Export File.
Sau khi kết xuất thành công, bạn có thể mở tệp trong Excel và thấy rằng bảng tính trông giống như lúc được nhập, nhưng bao gồm mọi thay đổi bạn đã thực hiện.
Đây chỉ là một ví dụ đơn giản về cách bạn có thể sử dụng bảng tính JavaScript SpreadJS để thêm dữ liệu vào file Excel và lưu lại thành tệp Excel với JavaScript.
⚡ Thử Code
Tự bạn thử hoặc fork mã nguồn trong ví dụ hoạt động này.
➕ Thêm Tính Năng Bổ Sung
Nếu bạn muốn mở và lưu các file Excel có biểu đồ (Charts), hình khối (Shapes) và PivotTables, hãy đảm bảo bao gồm các module add-on tùy chọn của SpreadJS như (@mescius/spread-sheets-charts, @mescius/spread-sheets-shapes và @mescius/spread-sheets-pivot-addon).
📚 Tìm Hiểu Thêm về Thành Phần Spreadsheet JavaScript Này
Bài viết này chỉ giới thiệu một phần nhỏ trong các khả năng của SpreadJS, thành phần bảng tính JavaScript. Xem tài liệu hướng dẫn để khám phá thêm nhiều tính năng có sẵn, và truy cập các bản demo trực tuyến để xem tính năng hoạt động thực tế và tương tác với mã mẫu. Việc tích hợp thành phần bảng tính vào ứng dụng của bạn cho phép tùy chỉnh trải nghiệm người dùng và cung cấp chức năng bảng tính quen thuộc mà không cần sử dụng ứng dụng bên ngoài.