Vuejs xuất bảng html sang excel ✅ Đã Test
Thủ Thuật về Vuejs xuất bảng html sang excel Chi Tiết
Hoàng Thị Thanh Mai đang tìm kiếm từ khóa Vuejs xuất bảng html sang excel được Cập Nhật vào lúc : 2022-12-21 20:10:13 . Với phương châm chia sẻ Bí quyết về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi tham khảo nội dung bài viết vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Admin lý giải và hướng dẫn lại nha.Nếu bạn đã phát triển phần mềm trong thuở nào gian dài, chắc chắn là bạn đã hơn một lần nghe thắc mắc đó từ người quản lý. Đối với những người dân không rành về kỹ thuật, việc yêu cầu nhập/xuất Excel nghe có vẻ như không phải là vấn đề lớn. Nó hoàn toàn có thể khó đến mức nào, phải không?
Nội dung chính Show- Ứng dụng VueCấu trúc ứng dụng VueThêm SpreadJS vào ứng dụng Vue của bạnThêm Xuất ExcelThêm Nhập ExcelKiểm tra ứng dụng Vue của bạnPhần kết luận
Nhưng thường xuyên, thắc mắc này gieo rắc nỗi sợ hãi vào trái tim của những nhà phát triển. Trên hầu hết những nền tảng, thao tác với những tệp Excel đòi hỏi nhiều thao tác. Về mặt lịch sử, điều này đôi khi đúng trên web. Làm việc với tài liệu Excel trong một ứng dụng web in như truyện tranh xkcd này. "Thật khó để lý giải sự khác lạ giữa điều thuận tiện và đơn giản và hầu như không thể. " Xây dựng bảng tính trong trình duyệt của riêng bạn bằng tính năng nhập Excel và xuất Excel in như một vấn đề cần 5 năm và một nhóm nghiên cứu và phân tích mới xử lý và xử lý được
Điều đó đang thay đổi. Hiện chúng tôi có những thư viện chìa khóa trao tay được cho phép bạn thả một bảng tính hoạt động và sinh hoạt giải trí đầy đủ vào ứng dụng web của tớ. SpreadJS là một trong số đó. Chúng ta sẽ xem xét cách sử dụng ứng dụng Vue hiện có - một ứng dụng trong thế giới thực sử dụng shop Vuex - và nâng cao nó bằng SpreadJS
Phần còn sót lại của nội dung 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 thao tác về Vue. js khung JavaScript tiến bộ để tạo giao diện người tiêu dùng web. Sẽ hữu ích nếu bạn đã sử dụng Vuex để quản lý trạng thái, nhưng đừng lo ngại nếu bạn chưa. Nó trực quan và dễ hiểu, và bạn sẽ hoàn toàn có thể biết điều gì đang xảy ra chỉ bằng phương pháp đọc mã nếu bạn đã sử dụng Vue
Bạn muốn thử xuất Excel trong Khung JavaScript?
Trong blog này, chúng tôi sẽ ra mắt cách thêm Nhập và Xuất Excel vào Ứng dụng Vue của bạn theo tiến trình sau
Ứng dụng Vue
Ứng dụng Vue mà tất cả chúng ta sẽ thao tác là một bảng điều khiển bán hàng đơn giản với một vài bảng tóm tắt và một bảng tài liệu. Đây là loại ứng dụng được xếp vào khuôn khổ “không tệ”
Mặc dù chỉ là bản demo, nhưng đây đúng là loại ứng dụng mà những nhà phát triển web doanh nghiệp phải tạo ra. Nó cũng đúng là loại ứng dụng mà chúng tôi thường được yêu cầu thêm hiệu suất cao Excel vào, vì vậy nó sẽ là một ví dụ hoàn hảo nhất cho phần còn sót lại của nội dung bài viết này
Mã cho ứng dụng này hoàn toàn có thể được tìm thấy ở đây
Để thiết lập sân khấu. bảng điều khiển là một ứng dụng một trang được tạo bằng Vue. Nó đang sử dụng những phương pháp hay nhất và tiên tiến nhất của Vue. những thành phần tệp đơn và kho tàng trữ tài liệu Vuex. Nó cũng đang sử dụng Bootstrap cho những thành phần CSS và khối mạng lưới hệ thống lưới của nó
Bootstrap không hề phổ biến như trước đây. Nhưng trên thực tế, Bootstrap vẫn có ở khắp mọi nơi – đặc biệt là trong những ứng dụng web dành riêng cho doanh nghiệp thường cần tương hỗ Excel. Tôi cá rằng nhiều ứng dụng web dành riêng cho doanh nghiệp mới sẽ vẫn sử dụng Bootstrap vào năm 2030
Nếu bạn muốn sử dụng Bulma hoặc Tachyons trong những ứng dụng tương hỗ bảng tính của tớ, hãy tiếp tục. SpreadJS sẽ hoạt động và sinh hoạt giải trí vui vẻ với một trong số họ
Cấu trúc ứng dụng Vue
Hãy cùng xem cách mã được cấu trúc. Cửa hàng Vuex và ứng dụng Vue của chúng tôi đều được định nghĩa trong main. js. Chúng tôi có một số trong những thành phần Vue tệp đơn, tất cả đều nằm trong thư mục thành phần.
Nếu bạn nhìn vào shop Vuex của chúng tôi, bạn sẽ thấy như sau.
Trạng thái ban đầu của shop của chúng tôi được đặt thành giá trị của RecentSales, một tập hợp tài liệu giả mà chúng tôi đã nhập. Chúng tôi cũng luôn có thể có một hiệu suất cao xử lý việc update lệch giá cả hàng mới gần đây khi chúng được thay đổi
Đợi một chút ít - nếu chúng tôi chỉ có một bộ tài liệu, làm cách nào chúng tôi tạo ba biểu đồ và một bảng? . thành phần vue. Trong số đó, bạn sẽ thấy một số trong những thuộc tính được tính toán đang được tạo nhờ vào tài liệu trong kho tàng trữ Vuex
Bây giờ nó có ý nghĩa hơn. Tập tài liệu duy nhất chứa mọi thứ chúng tôi cần để tạo tất cả những số và bảng cho trang tổng quan của chúng tôi. Vì tài liệu nằm trong kho tàng trữ Vuex phản ứng, nếu tài liệu update, thì tất cả những bảng điều khiển sẽ tự động update
Khả năng phản ứng này sẽ có ích trong phần tiếp theo khi tất cả chúng ta thay thế bảng tĩnh cũ nhàm chán của tớ bằng một bảng tính hoàn toàn có thể sửa đổi
Thêm SpreadJS vào ứng dụng Vue của bạn
Đây là nơi nụ cười khởi đầu. Chúng tôi có bảng điều khiển của tớ, nhưng chúng tôi muốn vô hiệu bảng HTML cũ kỹ đó. Vì vậy, tất cả chúng ta sẽ phải thay đổi mọi thứ một chút ít. Chúng tôi có một điểm khởi đầu tuyệt vời, nhưng chúng tôi phải chạy ứng dụng của tớ cục bộ để sử dụng SpreadJS ở chính sách phát triển mà không cần giấy phép
Bạn hoàn toàn có thể tải xuống mã đã hoàn thành xong tại đây để xem kết quả ở đầu cuối
Bắt đầu bằng phương pháp mở dự án công trình bất Động sản ban đầu mà không còn SpreadJS, mở một thiết bị đầu cuối, điều hướng tới thư mục mà bạn đã sao chép kho tàng trữ và chạy 'npm install'. Điều này setup những phụ thuộc thiết yếu để chạy ứng dụng. Khi quá trình setup phụ thuộc kết thúc, hãy chạy 'npm serve' để xem ứng dụng được update đang hoạt động và sinh hoạt giải trí. Nếu bạn muốn nhập rõ ràng những thư viện đã sử dụng, bạn hoàn toàn có thể sử dụng lệnh này
npm install @grapecity/spread-sheets @grapecity/spread-sheets-vue @grapecity/spread-excelio file-saver bootstrapHãy xem qua những thay đổi mà chúng tôi sẽ phải thực hiện để tăng cấp ứng dụng cũ của tớ lên phiên bản mới và được tăng cấp cải tiến. Vì chúng tôi sẽ thay thế bảng bán hàng của tớ bằng một bảng tính, nên chúng tôi sẽ đặt trang tính này vào Bảng bán hàng hiện tại của tớ. thành phần vue. Nhưng trước tiên, tất cả chúng ta sẽ phải vô hiệu cái bàn cũ của tớ. Khi nó biến mất, mẫu SalesTable của chúng tôi sẽ trông như vậy này
Sau khi vô hiệu bảng, chúng tôi đã có sẵn bảng điều khiển bảng của tớ và đang chờ bảng tính, vì vậy hãy thêm một bảng. Sau khi thêm sheet SpreadJS, template của tất cả chúng ta sẽ như vậy này
Đó là rất nhiều để tiếp nhận, vì vậy hãy xem qua nó để hiểu điều gì đang xảy ra
Đầu tiên, tất cả chúng ta tạo một bảng tính bằng phương pháp sử dụng phần tử gc-spread-sheets và link nó với hai trong số những thuộc tính của thành phần của tất cả chúng ta. hostClass và workbookInit
Bên trong bảng tính, chúng tôi tạo một trang tính mới với phần tử gc-worksheet và link nó với những thuộc tính tableData và autoGenerateColumns của thành phần chúng tôi. Lưu ý rằng tableData hoàn toàn giống với tableData mà tất cả chúng ta đã sử dụng để tạo bảng HTML đơn giản của tớ. Chúng tôi hoàn toàn có thể đưa tài liệu của tớ 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 tôi xác định những cột cho SpreadJS biết phương pháp hiển thị tài liệu của chúng tôi. Thuộc tính dataField cho tất cả chúng ta biết thuộc tính nào của tập tài liệu cơ bản mà cột này sẽ hiển thị và headerText đáp ứng cho SpreadJS một tên cột có định dạng đẹp để sử dụng. Phần còn sót lại của những ràng buộc cho từng cột là đơn giản;
Vì vậy, với mẫu của chúng tôi tại chỗ, sẽ cần bao nhiêu mã để làm cho tất cả điều này hoạt động và sinh hoạt giải trí? . Đây là SalesTable của chúng tôi. mã tập lệnh mới của thành phần vue
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css"; // SpreadJS imports import GC from "@grapecity/spread-sheets"; import "@grapecity/spread-sheets-vue"; import Excel from "@grapecity/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, cần rất ít mã để thực hiện việc làm này. Nếu có bất kể điều gì ở đây mà bạn lạ lẫm thuộc, phần 'Chuyên sâu về những thành phần' của tài liệu Vue sẽ lý giải rõ ràng về những thành phần của Vue. Những thứ duy nhất đã thay đổi so với trước đó là một vài lần nhập, một số trong những thuộc tính tài liệu và một vài phương thức. Các thuộc tính tài liệu sẽ trông quen thuộc; . Chúng là những tùy chọn thông số kỹ thuật mà chúng tôi đang ràng buộc với những thành phần trong bảng tính SpreadJS của tớ
Phương thức workbookInit là một cuộc 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 của tớ dưới dạng một biến thể hiện trên thành phần của chúng tôi để chúng tôi hoàn toàn có thể tương tác trực tiếp với nó nếu cần. Chúng tôi đã và đang thêm hiệu suất cao link cho việc kiện ValueChanged để tự động update tài liệu bất kể lúc nào những giá trị được thay đổi trong phiên bản SpreadJS
Một thay đổi ở đầu cuối. chúng tôi đáp ứng cho thành phần của tớ một kiểu có phạm vi để giúp chính kiểu 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 mang tên là bảng tính
Và 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 tớ, nó sẽ trông như vậy này
Nhưng xin chờ chút nữa
Hãy nhớ cách chúng tôi chuyển tài liệu bảng của tớ sang bảng tính mà không thực hiện bất kỳ thay đổi nào đối với tập tài liệu?
Điều gì sẽ xảy ra nếu tất cả chúng ta thay đổi giá trị bán hàng #6 từ $35.000 thành $3500?
Ồ. Chuyện gì đã xảy ra thế?
Chúng tôi đã update bảng SpreadJS và nó tự động update shop Vuex của chúng tôi
Có vẻ như Angela đã đi từ một tháng bán hàng ngoạn mục thành một tháng tầm thường. Xin lỗi về điều đó, Angela
Giờ đây, chúng tôi có một bảng điều khiển nâng cao mà người quản lý sẽ hài lòng. Họ hoàn toàn có thể sửa đổi tài liệu và xem update bảng điều khiển trước mắt họ. Nhưng tất cả chúng ta hoàn toàn có thể làm tốt hơn thế nữa bằng phương pháp thêm kĩ năng nhập và xuất tệp Excel. Tiếp theo, tất cả chúng ta sẽ học cách làm điều đó
Thêm Xuất Excel
Thêm xuất Excel vào trang tính của chúng tôi thật thuận tiện và đơn giản. Trước 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 tôi sẽ đặt nó ở cuối bảng điều khiển của chúng tôi trong SalesTable. vue, ngay sau thẻ đóng gc-spread-sheets
…Export to Excel
Như bạn hoàn toàn có thể thấy, nút của chúng tôi đang mong đợi một trình xử lý nhấp chuột mang tên exportSheet. Chúng tôi sẽ thêm nó ngay lập tức, nhưng trước tiên, chúng tôi sẽ nhập một hiệu suất cao từ gói NPM mang tên là trình tiết kiệm tệp
________số 8Tiếp theo, hãy thêm exportSheet vào đối tượng phương thức của thành phần của tất cả chúng ta
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 làm. đầu tiên, chúng tôi có một tham chiếu đến bảng Dữ liệu bán hàng của chúng tôi. Vì đó 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 phương pháp gọi getSheet. Điều này hoàn toàn có thể được sử dụng ở nơi khác trong hàm nếu tất cả 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, quy đổi trang tính của chúng tôi thành JSON và yêu cầu SpreadJS lưu nó. Và Voila. Chúng tôi đã xuất tệp Excel từ ứng dụng Vue tương hỗ bảng tính của tớ
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. bao gồmBindingSource và columnHeadersAsFrozenRows. Cùng với nhau, những tùy chọn này đảm nói rằng tài liệu chúng tôi link với trang tính được xuất đúng chuẩn và trang tính chứa những tiêu đề cột của chúng tôi. Nên nhìn file excel xuất ra sẽ hiểu từng cột
Thêm Nhập Excel
Tiếp theo, đã đến lúc thêm kĩ năng nhập tệp Excel.
Ngay phía dưới nút xuất của chúng tôi, chúng tôi sẽ thêm một chút ít đánh dấu sau.
0
Như bạn hoàn toàn có thể thấy, chúng tôi sẽ sử dụng trình chọn tệp HTML tiêu chuẩn và kích hoạt một phương thức thành phần mang tên là fileChange khi một tệp được chọn
Bây giờ tất cả 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 của tất cả chúng ta
1
Nhập tệp Excel cũng như xuất tệp đó, ngoại trừ điều ngược lại. Sau khi một tệp được chọn, chúng tôi yêu cầu ExcelIO nhập tệp đó. Khi hoàn tất, nó sẽ chuyển thông tin trang tính tới hàm gọi lại dưới dạng đối tượng JavaScript. Tiếp theo, chúng tôi chuyển tài liệu đã nhập thông qua một hiệu suất cao tùy chỉnh để trích xuất tài liệu chúng tôi cần từ nó và sau đó chuyển tài liệu đó trở lại kho tàng trữ Vuex
Thông thường, việc nhập tệp đơ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ổ thao tác. Trong trường hợp này, chúng tôi chỉ muốn phân tích tài liệu từ tệp đã nhập và update shop, sau đó sẽ update SpreadJS
Trong hiệu suất cao extractSheetData của chúng tôi - mà bạn sẽ tìm thấy trong src/util. sử dụng. js - bạn sẽ thấy rằng chúng tôi lấy tài liệu ra khỏi đối tượng JavaScript do ExcelIO trả về và cấu trúc lại nó để phù phù phù hợp với hình dạng của tài liệu trong shop Vuex của chúng tôi
Hàm nhập của chúng tôi giả định rằng tài liệu trong trang tính đã nhập sẽ có những cột in như tập tài liệu gốc của chúng tôi. Nếu ai đó tải lên một bảng tính không đáp ứng yêu cầu này, ứng dụng của chúng tôi sẽ không thể xử lý bảng tính đó. Đây là số lượng giới hạn hoàn toàn có thể hoàn toàn có thể đồng ý được trong hầu hết những ứng dụng dành riêng cho doanh nghiệp. Vì trang tổng quan của chúng tôi được thiết kế để hiển thị một loại tài liệu rõ ràng nên việc yêu cầu người tiêu dùng đáp ứng tài liệu ở định dạng mà ứng dụng mong ước là hợp lý
Khi trích xuất tài liệu hoàn tất, chúng tôi gọi cam kết trên shop Vuex và gửi tài liệu thanh toán giao dịch thanh toán bán hàng được update. Bảng SpreadJS và bảng điều khiển sau đó tự update để phản ánh tài liệu mới. Chúng tôi thực sự hoàn toàn có thể sử dụng một hiệu suất cao đột biến khác để nhập so với giá trị đang được thay đổi để chúng tôi hoàn toàn có thể thêm giá trị đó vào giá trị chính. js dưới dạng “IMPORT_RECENT_SALES”
2
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 phương pháp nhấp vào nút ‘Xuất ra 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ả tài liệu mà chúng tôi đã thấy trong bảng tính của bảng điều khiển của chúng tôi.
Mở trang tính trong Excel và thêm một vài dòng tài liệu. Sẽ không sao nếu bạn sử dụng những quốc gia mới hoặc nhân viên cấp dưới bán hàng mới; . Chỉ cần thận trọng không thay đổi thứ tự cột hoặc tên. 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 mới gần đây. Chọn tệp Excel bạn vừa sửa đổi.
Khi chọn tệp, bạn sẽ thấy những thành phần bảng điều khiển được update
Phần kết luận
Chúng ta đã hoàn tất. Chúng tôi đã sử dụng một ứng dụng bảng điều khiển Vue thông thường và thêm một bảng tính trực tiếp vào đó. Giờ đây, chúng tôi hoàn toàn có thể sửa đổi tài liệu trong trang tính và xem toàn bộ bản update bảng điều khiển của tớ. Bảng điều khiển nâng cao của chúng tôi cũng hoàn toàn có thể nhập và xuất những tệp Excel.
Vue, Vuex và SpreadJS tương hỗ update tốt lẫn nhau. Với tính năng tạo khuôn mẫu và link tài liệu thuận tiện và đơn giản của Vue, kho tàng trữ tài liệu tương tác của Vuex và bảng tính tương tác của SpreadJS, những ứng dụng JavaScript dành riêng cho doanh nghiệp phức tạp hoàn toàn có thể được tạo trong vài giờ.
Dù điều này còn có vẻ như tuyệt vời ra làm sao, chúng tôi hầu như không hiểu hết những gì mà SpreadJS hoàn toàn có thể làm được. Để làm rõ hơn những gì SpreadJS hoàn toàn có thể làm cho bạn, hãy tham khảo Bản trình diễn của SpreadJS, gồm có những bản trình diễn đầy đủ về những tính năng rất khác nhau của SpreadJS, gồm có những lý giải cũng như mã trực tiếp trình bày những 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 những ứng dụng của riêng mình, thì Tài liệu SpreadJS có thông tin bạn cần
Tải thêm tài liệu liên quan đến nội dung bài viết Vuejs xuất bảng html sang excel programming html