Nhập và xuất Excel XLSX bằng Vue: Hướng dẫn

“Trông rất tuyệt, nhưng bạn có thể thêm tính năng nhập Excel vào được không?” Nếu bạn đã phát triển phần mềm trong một thời gian dài, chắc hẳn bạn đã nhiều lần nghe câu hỏi đó từ người quản lý. Đối với những người không rành về kỹ thuật, việc yêu cầu nhập/xuất Excel không có vẻ là vấn đề lớn. Nó có thể khó đến mức nào, phải không? Nhưng thường xuyên, câu hỏi này gây ra nỗi sợ hãi trong lòng các nhà phát triển. Trên hầu hết các nền tảng, làm việc với tệp Excel đòi hỏi nhiều thao tác. Trong lịch sử, điều này đã đúng gấp đôi trên web. Làm việc với dữ liệu Excel trong ứng dụng web có cảm giác hơi giống : "Thật khó để giải thích sự khác biệt giữa điều dễ dàng và điều gần như không thể." Việc xây dựng bảng tính trong trình duyệt của riêng bạn với tính năng nhập và xuất Excel có vẻ như là một vấn đề mà sẽ phải mất 5 năm và một nhóm nghiên cứu mới giải quyết được. truyện tranh xkcd này Điều đó đang thay đổi. Hiện tại, chúng tôi có thư viện chìa khóa trao tay cho phép bạn đưa bảng tính đầy đủ chức năng vào ứng dụng web của mình. là một trong số đó. Chúng ta sẽ xem cách sử dụng một ứng dụng Vue hiện có – một ứng dụng trong thế giới thực sử dụng cửa hàng Vuex – và cải tiến nó bằng cách sử dụng SpreadJS. SpreadJS Phần còn lại của bài viết giả định rằng bạn đã hiểu HTML, CSS và JavaScript. Nó cũng giả định rằng bạn có kiến thức làm việc về khung JavaScript lũy tiến để tạo giao diện người dùng web. Sẽ rất hữu ích nếu bạn đã sử dụng để quản lý trạng thái, nhưng đừng lo lắng nếu bạn chưa sử dụng. Nó trực quan và dễ hiểu, đồng thời bạn sẽ có thể hiểu điều gì đang diễn ra chỉ bằng cách đọc mã nếu bạn đã sử dụng Vue. Vue.js Vuex Trong blog này, chúng tôi sẽ đề cập đến cách thêm Nhập và Xuất Excel vào Ứng dụng Vue của bạn theo các bước sau: Cấu trúc ứng dụng Vue Thêm SpreadJS vào ứng dụng Vue của bạn Thêm xuất Excel Thêm nhập Excel Kiểm tra ứng dụng Vue của bạn Ứng dụng Vue Ứng dụng Vue mà chúng ta sẽ làm việc là một bảng thông tin bán hàng đơn giản với một vài bảng tóm tắt và một bảng dữ liệu. Đây là loại ứng dụng được xếp vào loại “không tệ”: Mặc dù chỉ là bản demo nhưng đây chính xác là loại ứng dụng mà các nhà phát triển web doanh nghiệp phải tạo ra. Đây cũng chính xác là loại ứng dụng mà chúng tôi thường được yêu cầu thêm chức năng Excel vào, vì vậy đây sẽ là ví dụ hoàn hảo cho phần còn lại của bài viết này. Mã cho ứng dụng này có thể được tìm thấy . ở đây Nếu bạn muốn xem cách tạo ứng dụng Vue từ đầu, hãy xem này. hướng dẫn bắt đầu nhanh Để thiết lập giai đoạn, bảng điều khiển là một ứng dụng một trang được tạo bằng Vue. Nó sử dụng : các thành phần tệp đơn và kho dữ liệu Vuex. Nó cũng sử dụng cho các thành phần CSS và hệ thống lưới. các phương pháp thực hành tốt nhất và mới nhất về Vue Bootstrap Bootstrap không còn phổ biến như trước, nhưng trên thực tế, Bootstrap vẫn có mặt ở khắp mọi nơi – trong các ứng dụng web doanh nghiệp thường cần hỗ trợ Excel. Chúng tôi cá rằng nhiều ứng dụng web doanh nghiệp vẫn sẽ sử dụng Bootstrap vào năm 2030. đặc biệt là mới Nếu bạn muốn sử dụng hoặc trong các ứng dụng hỗ trợ bảng tính của mình, hãy tiếp tục! SpreadJS sẽ hoạt động tốt với một trong hai. Bulma Tachyons Cấu trúc ứng dụng Vue Chúng ta hãy xem mã được cấu trúc như thế nào. Cửa hàng Vuex và ứng dụng Vue của chúng tôi đều được xác định trong . Chúng tôi có một số thành phần Vue một tệp, tất cả đều nằm trong thư mục thành phần. main.js Nếu bạn nhìn vào cửa hàng Vuex của chúng tôi, bạn sẽ thấy như sau: const store = new Vuex.Store({ state: { recentSales } mutations: { UPDATE_RECENT_SALES(state) { state.recentSales.push([]); state.recentSales.pop(); } } }); Trạng thái ban đầu của cửa hàng của chúng tôi được đặt thành giá trị của NearSales, một tập hợp dữ liệu giả mà chúng tôi đã nhập. Chúng tôi cũng có chức năng xử lý việc cập nhật doanh số bán hàng gần đây khi chúng được thay đổi. Đợi tí. Nếu chúng ta chỉ có một bộ dữ liệu thì làm cách nào chúng ta tạo được ba biểu đồ một bảng? Để xem điều gì đang xảy ra, hãy mở thành phần . Trong đó, bạn sẽ thấy một số thuộc tính được tính toán đang được tạo dựa trên dữ liệu trong cửa hàng Vuex: và Dashboard.vue import NavBar from "./NavBar"; import TotalSales from "./TotalSales"; import SalesByCountry from "./SalesByCountry"; import SalesByPerson from "./SalesByPerson"; import SalesTable from "./SalesTable"; import { groupBySum } from "../util/util"; export default { components: { NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales }, computed: { totalSales() { const items = this.$store.state.recentSales; const total = items.reduce((acc, sale) => (acc += sale.value), 0); return parseInt(total); }, chartData() { const items = this.$store.state.recentSales; const groups = groupBySum(items, "country", "value"); return groups; }, personSales() { const items = this.$store.state.recentSales; const groups = groupBySum(items, "soldBy", "value"); return groups; }, salesTableData() { return this.$store.state.recentSales; }, } }; Bây giờ, nó có ý nghĩa hơn! Tập dữ liệu duy nhất chứa mọi thứ chúng tôi cần để tạo tất cả các số và bảng cho trang tổng quan của mình. Vì dữ liệu nằm trong kho Vuex phản ứng nên nếu dữ liệu cập nhật thì tất cả bảng điều khiển sẽ tự động cập nhật. Phản ứng này sẽ có ích trong phần tiếp theo khi chúng ta thay thế bảng tĩnh cũ nhàm chán bằng một bảng tính có thể chỉnh sửa. Thêm SpreadJS vào ứng dụng Vue của bạn Đây là nơi niềm vui bắt đầu! Chúng tôi có bảng điều khiển của mình nhưng chúng tôi muốn loại bỏ bảng HTML cũ cồng kềnh đó. Vì vậy, chúng ta sẽ phải thay đổi mọi thứ một chút. Chúng tôi có điểm khởi đầu tuyệt vời, nhưng chúng tôi phải chạy ứng dụng của mình cục bộ để sử dụng SpreadJS ở chế độ phát triển mà không cần giấy phép. Bạn có thể để xem kết quả cuối cùng. tải xuống mã đã hoàn thành Bắt đầu bằng cách mở dự án ban đầu mà không có SpreadJS. Mở một thiết bị đầu cuối, điều hướng đến thư mục nơi bạn đã sao chép kho lưu trữ và chạy 'npm install.' Việc này sẽ cài đặt các phụ thuộc cần thiết để chạy ứng dụng. Khi quá trình cài đặt phần phụ thuộc hoàn tất, hãy chạy 'npm server' để xem hoạt động của ứng dụng được cập nhật. Nếu bạn muốn nhập cụ thể các thư viện được sử dụng, bạn có thể sử dụng lệnh này: npm install @mescius/spread-sheets @mescius/spread-sheets-vue @mescius/spread-excelio file-saver bootstrap Hãy xem qua những thay đổi mà chúng tôi sẽ phải thực hiện để nâng cấp ứng dụng cũ lên phiên bản mới và cải tiến. Vì chúng ta sẽ thay thế bảng bán hàng bằng một bảng tính nên chúng ta sẽ đặt bảng tính này vào thành phần hiện có của mình, nhưng trước tiên, chúng ta sẽ phải loại bỏ bảng cũ. Khi nó biến mất, mẫu SalesTable của chúng tôi sẽ trông như thế này: SalesTable.vue Sau khi loại bỏ bảng, chúng tôi đã chuẩn bị sẵn bảng bảng và chờ bảng tính, vì vậy hãy thêm bảng tính! Sau khi thêm bảng SpreadJS, mẫu của chúng ta sẽ trông như thế này: Có rất nhiều điều cần tiếp thu, vì vậy hãy cùng xem qua nó để hiểu điều gì đang xảy ra. Đầu tiên, chúng ta tạo một bảng tính bằng cách sử dụng phần tử gc-s Spread-sheets và liên kết nó với hai thuộc tính của thành phần: HostClass và WorkbookInit. Bên trong bảng tính, chúng ta tạo một bảng tính mới với phần tử gc-worksheet và liên kết nó với các thuộc tính tableData và autoGenerateColumns của thành phần chúng ta. Lưu ý rằng tableData hoàn toàn giống với tableData mà chúng ta đã sử dụng để tạo bảng HTML đơn giản. Chúng tôi có thể đưa dữ liệu của mình vào SpreadJS nguyên trạng mà không cần thay đổi! Cuối cùng, bên trong trang tính, chúng ta xác định các cột cho SpreadJS biết cách hiển thị dữ liệu của chúng ta. Thuộc tính dataField cho chúng ta biết thuộc tính nào của tập dữ liệu cơ bản mà cột này sẽ hiển thị và headerText cung cấp cho SpreadJS một tên cột được định dạng đẹp mắt để sử dụng. Phần còn lại của các ràng buộc cho mỗi cột rất đơn giản. Tài liệu SpreadJS có mọi thứ bạn có thể chuyển vào cột gc. danh sách đầy đủ Vì vậy, với mẫu của chúng tôi đã có, sẽ cần bao nhiêu mã để thực hiện tất cả điều này? May mắn thay, không nhiều chút nào! Đây là mã tập lệnh mới của thành phần của chúng tôi: SalesTable.vue import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css"; // SpreadJS imports import GC from "@mescius/spread-sheets"; import "@mescius/spread-sheets-vue"; import Excel from "@mescius/spread-excelio"; import TablePanel from "./TablePanel"; export default { components: { TablePanel }, props: ["tableData"], data(){ return { sheetName: 'Sales Data', hostClass:'spreadsheet', autoGenerateColumns:true, width:200, visible:true, resizable:true, priceFormatter:"$ #.00" } }, methods: { workbookInit: function(_spread_) { this._spread = spread; var self = this; spread.bind(GC.Spread.Sheets.Events.ValueChanged, function () { const store = self.$store; var sheet = self._spread.getSheetFromName("Sales Data"); var newSalesData = sheet.getDataSource(); store.commit('UPDATE_RECENT_SALES', newSalesData); }); } } }; Do tính đơn giản của Vue nên cần rất ít mã để thực hiện công việc này. Nếu có bất kỳ điều gì ở đây bạn chưa biết, phần 'Chuyên sâu về thành phần' của tài liệu Vue sẽ giải thích chi tiết về các thành phần Vue. Điều duy nhất đã thay đổi là một số nội dung nhập, một số thuộc tính dữ liệu và một số phương thức. Các thuộc tính dữ liệu trông quen thuộc; chúng tôi đã thấy chúng cách đây một lát trong mẫu. Chúng là các tùy chọn cấu hình mà chúng tôi ràng buộc với các thành phần trong bảng tính SpreadJS của mình. Phương thức WorkbookInit là một lệnh gọi lại mà SpreadJS gọi khi trang tính được khởi tạo. Trong phương pháp này, chúng tôi lưu đối tượng bảng tính SheetJS dưới dạng một biến thể hiện trên thành phần của mình để chúng tôi có thể tương tác trực tiếp với nó nếu cần. Chúng tôi cũng đã thêm chức năng liên kết cho sự kiện ValueChanged để tự động cập nhật dữ liệu bất cứ khi nào giá trị được thay đổi trong phiên bản SpreadJS. Một thay đổi cuối cùng: Chúng tôi cung cấp cho thành phần của mình một kiểu có phạm vi để giúp tạo kiểu cho bảng tính. Chúng ta đã thấy điều này trước đó khi chuyển HostClass cho phần tử gc- Spread-sheets. Vì HostClass được đặt thành 'bảng tính' nên chúng tôi sẽ tạo một lớp CSS có tên là bảng tính: .spreadsheet { width: 100%; height: 400px; border: 1px solid lightgray; } Tại thời điểm này, nếu chúng tôi không thực hiện thay đổi nào khác và tải Trang tổng quan của mình, nó sẽ trông như thế này: Nhưng xin chờ chút nữa! Hãy nhớ cách chúng tôi chuyển dữ liệu bảng của mình sang bảng tính mà không thực hiện bất kỳ thay đổi nào đối với tập dữ liệu? Bây giờ dữ liệu của chúng tôi đã ở trong bảng tính, chúng tôi có thể chỉnh sửa nó. Điều gì sẽ xảy ra nếu chúng ta thay đổi giá trị của lần bán thứ 6 từ 35.000 USD thành 3500 USD? Nếu chúng ta vào trang tính và chỉnh sửa giá trị, chúng ta sẽ nhận được một bảng điều khiển trông như thế này: Ồ! Chuyện gì đã xảy ra thế? Chúng tôi đã cập nhật bảng SpreadJS và nó cập nhật cửa hàng Vuex của chúng tôi. tự động Có vẻ như Angela đã đi từ một tháng bán hàng ngoạn mục trở thành một tháng bán hàng tầm thường. Xin lỗi về điều đó, Angela! Bây giờ chúng tôi có một trang tổng quan nâng cao mà người quản lý sẽ hài lòng. Họ có thể sửa đổi dữ liệu và xem cập nhật bảng điều khiển ngay trước mắt họ, nhưng chúng tôi thậm chí còn có thể làm tốt hơn bằng cách thêm khả năng nhập và xuất tệp Excel. Tiếp theo, chúng ta sẽ học cách làm điều đó. Thêm xuất Excel Việc thêm tính năng xuất Excel vào trang tính của chúng tôi thật dễ dàng. Đầu tiên, hãy thêm nút xuất vào bảng điều khiển của chúng tôi. Chúng ta sẽ đặt nó ở cuối bảng trong tệp , ngay sau thẻ đóng gc- Spread-sheets: SalesTable.vue … Export to Excel Như bạn có thể thấy, nút của chúng tôi đang chờ một trình xử lý nhấp chuột có tên làexportSheet. Chúng tôi sẽ thêm nó ngay sau đây, nhưng trước tiên, chúng tôi sẽ nhập một hàm từ gói NPM có tên file-saver: import { saveAs } from 'file-saver'; Tiếp theo, hãy thêm importSheet vào đối tượng phương thức của thành phần: exportSheet: function() { const spread = this._spread; const fileName = "SalesData.xlsx"; //const sheet = spread.getSheet(0); const excelIO = new IO(); const json = JSON.stringify(spread.toJSON({ includeBindingSource: true, columnHeadersAsFrozenRows: true, })); excelIO.save(json, (blob) => { saveAs(blob, fileName); }, function (e) { console.log(e) }); } Đây là những gì mã đang thực hiện: đầu tiên, chúng tôi nhận được một tham chiếu đến Bảng dữ liệu bán hàng của mình. Vì đây là trang tính duy nhất trong bảng tính của chúng tôi nên nó tồn tại ở chỉ mục 0 và chúng tôi truy cập nó bằng cách gọi getSheet. Điều này có thể được sử dụng ở nơi khác trong hàm nếu chúng ta cần tương tác trực tiếp với trang tính. Sau đó, chúng tôi khởi tạo thư viện ExcelIO của SpreadJS, chuyển đổi trang tính của chúng tôi thành JSON và yêu cầu SpreadJS lưu nó. Thì đấy! Chúng tôi đã xuất tệp Excel từ ứng dụng Vue hỗ trợ bảng tính của mình! Lưu ý rằng chúng tôi đang chuyển hai tùy chọn tuần tự hóa cho lệnh gọi toJSON của trang tính: includeBindingSource và cộtHeadersAsFrozenRows. Cùng với nhau, các tùy chọn này đảm bảo rằng dữ liệu chúng ta liên kết với trang tính được xuất chính xác và trang tính đó chứa các tiêu đề cột của chúng ta. Như vậy nhìn vào file Excel đã xuất sẽ hiểu từng cột. Thêm nhập Excel Tiếp theo, đã đến lúc thêm khả năng tệp Excel. nhập Ngay bên dưới nút xuất, chúng tôi sẽ thêm đoạn đánh dấu sau: Import Excel File: Như bạn có thể thấy, chúng tôi sẽ sử dụng bộ chọn tệp HTML tiêu chuẩn và kích hoạt một phương thức thành phần có tên fileChange khi tệp được chọn. Bây giờ chúng ta đã thêm mẫu, hãy thêm trình xử lý thay đổi vào đối tượng phương thức của thành phần: fileChange: function (_e_) { if (this._spread) { const fileDom = e.target || e.srcElement; const excelIO = new Excel.IO(); const spread = this._spread; const store = this.$store; /*const deserializationOptions = { includeBindingSource: true, frozenRowsAsColumnHeaders: true };*/ excelIO.open(fileDom.files[0], (_data_) => { // Used for simply loading the JSON from a file //spread.fromJSON(data, deserializationOptions); var newSalesData = extractSheetData(data); store.commit('IMPORT_RECENT_SALES', newSalesData) }); } } Nhập tệp Excel cũng giống như xuất tệp, ngoại trừ việc làm ngược lại. Sau khi chọn tệp, chúng tôi yêu cầu ExcelIO nhập tệp đó. Khi hoàn tất, nó chuyển thông tin trang tính đến hàm gọi lại dưới dạng đối tượng JavaScript. Tiếp theo, chúng tôi chuyển dữ liệu đã nhập thông qua một hàm tùy chỉnh để trích xuất dữ liệu chúng tôi cần từ đó rồi đưa dữ liệu đó trở lại cửa hàng Vuex. Thông thường, việc nhập tệp cũng đơn giản như gọi phương thức mở ExcelIO đó nhưng sử dụng phương thức “fromJSON” của sổ làm việc. Trong trường hợp này, chúng tôi chỉ muốn phân tích dữ liệu từ tệp đã nhập và cập nhật cửa hàng, sau đó sẽ cập nhật SpreadJS. Trong hàm extractSheetData của chúng tôi, bạn sẽ tìm thấy trong tệp src/util.util.js, bạn sẽ thấy rằng chúng tôi lấy dữ liệu ra khỏi đối tượng JavaScript được ExcelIO trả về và cơ cấu lại nó để khớp với hình dạng của dữ liệu trong Vuex của chúng tôi cửa hàng. Hàm nhập của chúng tôi giả định rằng dữ liệu trong trang tính đã nhập sẽ có cùng các cột với tập dữ liệu gốc của chúng tôi. Nếu ai đó tải lên bảng tính không đáp ứng yêu cầu này thì ứng dụng của chúng tôi sẽ không thể xử lý bảng tính đó. Đây là một hạn chế có thể chấp nhận được trong hầu hết các ứng dụng kinh doanh. Vì trang tổng quan của chúng tôi được thiết kế để hiển thị một loại dữ liệu cụ thể nên việc yêu cầu người dùng cung cấp dữ liệu theo định dạng mà ứng dụng mong đợi là hợp lý. Khi trích xuất dữ liệu hoàn tất, chúng tôi gọi cam kết trên cửa hàng Vuex và gửi dữ liệu giao dịch bán hàng được cập nhật. Sau đó, bảng SpreadJS và bảng điều khiển sẽ tự cập nhật để phản ánh dữ liệu mới. Trên thực tế, chúng ta có thể sử dụng một hàm đột biến khác để nhập so với giá trị đang được thay đổi để có thể thêm giá trị đó vào tệp dưới dạng “IMPORT_RECENT_SALES”: main.js const store = new Vuex.Store({ state: { recentSales }, mutations: { UPDATE_RECENT_SALES(state) { state.recentSales.push([]); state.recentSales.pop(); }, IMPORT_RECENT_SALES(state, sales) { state.recentSales = sales; } } }); Kiểm tra ứng dụng Vue của bạn Bây giờ bạn đã thấy mã, hãy thử nhập và xuất Excel trong ứng dụng Vue của chúng tôi. Bắt đầu bằng cách nhấp vào nút 'Xuất sang Excel'. Sau đó, trình duyệt web của bạn sẽ tải xuống bảng tính Excel chứa tất cả dữ liệu chúng tôi đã thấy trong bảng tính trên trang tổng quan của chúng tôi. Mở trang tính trong Excel và thêm một vài dòng dữ liệu. Không sao cả nếu bạn sử dụng các quốc gia mới hoặc nhân viên bán hàng mới; tất cả các thành phần bảng điều khiển của chúng tôi có thể xử lý nó. Chỉ cần cẩn thận không thay đổi thứ tự hoặc tên cột. Khi bạn hoàn tất, hãy nhấp vào nút 'Chọn Tệp' ở cuối bảng Bán hàng Gần đây. Chọn tệp Excel bạn vừa chỉnh sửa. Khi chọn tệp, bạn sẽ thấy các thành phần trang tổng quan được cập nhật. Phần kết luận Đã được thực hiện! Chúng tôi lấy một ứng dụng bảng điều khiển Vue thông thường và thêm bảng tính trực tiếp vào đó. Bây giờ chúng tôi có thể chỉnh sửa dữ liệu trong trang tính và xem toàn bộ bản cập nhật trang tổng quan của chúng tôi. Trang tổng quan nâng cao của chúng tôi cũng có thể nhập và xuất các tệp Excel. Vue, Vuex và SpreadJS bổ sung tốt cho nhau. Với tính năng liên kết dữ liệu và tạo khuôn mẫu dễ dàng của Vue, kho lưu trữ dữ liệu phản ứng của Vuex và bảng tính tương tác của SpreadJS, các ứng dụng JavaScript phức tạp dành cho doanh nghiệp có thể được tạo trong vài giờ. Điều này có vẻ tuyệt vời nhưng chúng ta hầu như chưa vạch ra được bề nổi những gì SpreadJS có thể làm. Để hiểu rõ hơn những gì SpreadJS có thể làm cho bạn, hãy tham khảo , bao gồm các bản demo đầy đủ về các tính năng khác nhau của SpreadJS, phần giải thích và mã trực tiếp giới thiệu các tính năng đó. Nếu bạn đang muốn tìm hiểu sâu hơn về cách sử dụng SpreadJS trong ứng dụng của riêng mình thì có thông tin bạn cần. Bản trình diễn SpreadJS Tài liệu SpreadJS Tìm hiểu thêm về Thành phần bảng tính JavaScript này: https://youtu.be/GVncGlcXkak?embedable=true