Bảng Vue html sang Excel

Vì kích thước của

 
  
 
       
      
 
        
 
           
           
           
           
        
 Nội dung chính Show
 
Thông số
Nhập Excel
Ứng dụng Vue
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
Phần kết luận
 
 
      
 
  
 

3 vẫn còn rất lớn nên chức năng xuất không phải là chức năng phổ biến, vì vậy nên sử dụng chức năng lazy loading khi sử dụng. Phương pháp sử dụng như sau

cảnh báo v3. 9. 1+

Mã tương thích cho Blob đã bị xóa trong các phiên bản sau của

4. Nếu bạn cần tương thích với các trình duyệt cấp thấp, bạn có thể giới thiệu blob-polyfill theo cách thủ công

Thông số

ParamsDescriptionTypeAccepted ValuesDefaultheaderXuất tiêu đề của dataArray/[]dataDữ liệu cụ thể đã xuấtArray/[]filenameExport file nameString/excel-listautoWidthCho dù chiều rộng tự động của ôBooleantrue / falsetruebookTypeXuất loại tệpStringxlsx, csv, txt, xlsx

Ví dụ

Nhập Excel

Thành phần nhập UploadExcelExcel được đóng gói, hỗ trợ nhấp và kéo tải lên, ngoài ra, nó cũng Phụ thuộc vào

3

Nó cung cấp hai chức năng gọi lại

• beforeUpload

  Bạn có thể đưa ra một số đánh giá đặc biệt trước khi tải lên. Ví dụ: nếu kích thước của tệp lớn hơn 1 megabyte?

  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 đã hơn một 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 nghe có vẻ không phải 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 gieo rắc nỗi sợ hãi vào trái tim của 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 các 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 dữ liệu Excel trong một ứng dụng web giống như truyện tranh xkcd này. "Thật khó để giải thích sự khác biệt giữa điều dễ dàng 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 giống như một vấn đề cần 5 năm và một nhóm nghiên cứu mới giải quyết được

  Điều đó đang thay đổi. Hiện chúng tôi có các thư viện chìa khóa trao tay cho phép bạn thả một bảng tính hoạt động đầy đủ vào ứng dụng web của mình. 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 cửa hàng Vuex - và nâng cao nó bằng 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ề Vue. js khung JavaScript tiến bộ để tạo giao diện người 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 lắng nếu bạn chưa. Nó trực quan và dễ hiểu, và bạn sẽ có thể biết điều gì đang xảy ra chỉ bằng cách đọ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ẽ giới thiệu 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

  Ứng dụng Vue

  Ứng dụng Vue mà chúng ta sẽ làm việ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 dữ liệu. Đây là loại ứng dụng được xếp vào danh mục “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. Nó 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 nó sẽ là một 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

  Để 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 các phương pháp hay nhất và mới nhất của Vue. các thành phần tệp đơn và kho lưu trữ dữ liệu Vuex. Nó cũng đang sử dụng Bootstrap cho các thành phần CSS và hệ thống lưới của nó

  Bootstrap không còn 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 các ứng dụng web dành cho doanh nghiệp thường cần hỗ trợ Excel. Tôi cá rằng nhiều ứng dụng web dành 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 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 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ố 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 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 RecentSales, một tập hợp dữ liệu giả mà chúng tôi đã nhập. Chúng tôi cũng có một 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 một chút - nếu chúng tôi chỉ có một bộ dữ 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 đó, 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 kho lưu trữ Vuex

  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 chúng tôi. Vì dữ liệu nằm trong kho lưu trữ Vuex phản ứng, nếu dữ liệu cập nhật, thì tất cả các bảng điều khiển sẽ tự động cập nhật

  Khả năng 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 của mình 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ũ kỹ đó. Vì vậy, chúng ta sẽ phải thay đổi mọi thứ một chú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 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ể tải xuống mã đã hoàn thành tại đây để xem kết quả cuối cùng

  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 mà bạn đã sao chép kho lưu trữ và chạy 'npm install'. Điều này 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ụ thuộc kết thúc, hãy chạy 'npm serve' để xem ứng dụng được cập nhật đang hoạt động. Nếu bạn muốn nhập cụ thể các thư viện đã sử dụng, bạn có thể sử dụng lệnh này

  npm install @grapecity/spread-sheets @grapecity/spread-sheets-vue @grapecity/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ũ của mình lên phiên bản mới và được cải tiến. Vì chúng tôi sẽ thay thế bảng bán hàng của mình 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 mình. thành phần vue. Nhưng trước tiên, chúng ta sẽ phải loại bỏ cái bàn cũ của mình. Khi nó biến mất, mẫu SalesTable của chúng tôi sẽ trông như thế này

  Sau khi loại bỏ bảng, chúng tôi đã có sẵn bảng điều khiển bảng của mình 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 chúng ta sẽ như thế 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, chúng ta tạo một bảng tính bằng cách sử dụng phần tử gc-spread-sheets và liên kết nó với hai trong số các thuộc tính của thành phần của 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à liên kết nó với các 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à chúng ta đã sử dụng để tạo bảng HTML đơn giản của mình. 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 tôi xác định các cột cho SpreadJS biết cách hiển thị dữ liệu của chúng tôi. 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 để sử dụng. Phần còn lại của các ràng buộc cho mỗi 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? . Đâ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 công việc này. Nếu có bất cứ điều gì ở đây mà bạn không quen thuộc, phần 'Chuyên sâu về các 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 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ố thuộc tính dữ liệu và một vài phương thức. Các thuộc tính dữ liệu sẽ trông quen thuộc; . Chúng là các tùy chọn cấu hình mà chúng tôi đang 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 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 mình 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 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 các 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 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 có 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 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?

  Điều gì sẽ xảy ra nếu 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 đã cập nhật bảng SpreadJS và nó tự động cập nhật cửa hàng 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ọ có thể sửa đổi dữ liệu và xem cập nhật bảng điều khiển trước mắt họ. Nhưng chúng ta có thể làm tốt hơn nữa 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

  Thêm xuất Excel vào trang tính của chúng tôi thật dễ dàng. 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 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 có 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 chức năng từ gói NPM có tên là trình tiết kiệm tệp

  ________số 8

  Tiếp theo, hãy thêm exportSheet vào đối tượng phương thức của thành phần của 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 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ó. Và Voila. 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. bao gồmBindingSource 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 tôi 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 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 khả năng nhập tệp Excel.
  Ngay bên dưới nút xuất của chúng tôi, chúng tôi sẽ thêm một chút đánh dấu sau.

  0

  Như bạ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 có tên là fileChange khi một 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 của chúng ta

  1

  Nhập tệp Excel cũng giố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 dữ liệu đã nhập thông qua một chức năng tùy chỉnh để trích xuất dữ liệu chúng tôi cần từ nó và sau đó chuyển dữ liệu đó trở lại kho lưu 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ổ 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 chức năng 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 dữ liệu ra khỏi đối tượng JavaScript do ExcelIO trả về và cấu trúc lại nó để phù hợp với hình dạng của dữ liệu trong cửa hàng Vuex của chúng tôi

  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ác cột giống như tập dữ 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à giới hạn có thể chấp nhận được trong hầu hết các ứng dụng dành 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 dữ liệu cụ thể nên việc yêu cầu người dùng cung cấp dữ liệu ở định dạng mà ứng dụng mong muốn 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. Bảng SpreadJS và bảng điều khiển sau đó tự cập nhật để phản ánh dữ liệu mới. Chúng tôi thực sự có thể sử dụng một chức năng đột biến khác để nhập so với giá trị đang được thay đổi để chúng tôi 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 cách 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ả dữ 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 dữ liệu. Sẽ không sao 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; . Chỉ cần cẩn thận 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 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 bảng điều khiển được cập nhật

  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 có thể chỉnh sửa dữ liệu trong trang tính và xem toàn bộ bản cập nhật bảng điều khiển của mình. Bảng điều khiển 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 tạo khuôn mẫu và liên kết dữ liệu dễ dàng của Vue, kho lưu trữ dữ liệu tương tác của Vuex và bảng tính tương tác của SpreadJS, các ứng dụng JavaScript dành cho doanh nghiệp phức tạp có thể được tạo trong vài giờ.

  Dù điều này có vẻ tuyệt vời như thế nào, chúng tôi hầu như không hiểu hết những gì mà SpreadJS có thể làm được. Để hiểu rõ hơn những gì SpreadJS có thể làm cho bạn, hãy tham khảo Bản trình diễn của SpreadJS, bao gồm các bản trình diễn đầy đủ về các tính năng khác nhau của SpreadJS, bao gồm các giải thích cũng như mã trực tiếp trình bày 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 các ứng dụng của riêng mình, thì Tài liệu SpreadJS có thông tin bạn cần