步驟一：安裝依賴

npm install --save xlsx file-saver

步驟二：在放置需要導出功能的組件中引入相關組件

import FileSaver from 'file-saver' import XLSX from 'xlsx'

步驟三：給table設置一個id

HTML中的設置，簡單來說就是給需要導出的table標簽el-table上加一個id：如id="exportTable"，對應下面的exportExcel方法中的 document.querySelector('#exportTable')

步驟四：寫method

在methods中設置真正實現導出轉換excel表格的方法:

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 導出的內容只做解析，不進行格式轉換var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)/* get binary string as output */var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'fileName.xlsx')} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout }

注意：

• 在表格中的數字為百分比或者是其他的，在導出的時候會進行處理變成小數，或者科學計數法，這個就需要集啊讓xlsxParam這個字段，讓導出不做格式轉換，這樣就能夠你的table中是什么，導出就是什么。
• 可以導出表格的，但有個問題是導出的數據是重復的，這個是因為你的表格有列使用了fixed屬性，element-ui的table使用了fixed屬性固定列，導出表格時會出現導出兩次的問題，是因為在table中有兩個table標簽，我們可以通過代碼解決這個問題，注意代碼中拷貝了一個table元素，否則直接刪除會刪除頁面中的表格

這個時候我們可以改良一下我們的代碼：

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 導出的內容只做解析，不進行格式轉換var table = document.querySelector('#exportTab').cloneNode(true)table.removeChild(table.querySelector('.el-table__fixed')) //這里是雙下劃線var wb = XLSX.utils.table_to_book(table, xlsxParam)/* get binary string as output */var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'fileName.xlsx')} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout }

總結

以上是生活随笔為你收集整理的vue表格导出到Excel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。