首先引用xlsx
首先是導出方法

// 導出exportExcel() {// 格式化數據為二維數組this.exportData = this.formatTableData()// 設置表格數據const ws = XLSX.utils.aoa_to_sheet(this.exportData)// 新建一個工作簿const wb = XLSX.utils.book_new()// 設置表格樣式，!cols為列寬const options = { '!cols': [] }for (const key in this.tableLabel) {options['!cols'].push({ wpx: this.tableLabel[key] })}ws['!cols'] = options['!cols']// 將工作表添加到工作簿XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')// 輸出工作表，由文件名決定的輸出格式const fileNamePrefix = this.unitTestCoverObj.applicationNameconst time = getFullTime(null, true).replace(/-/g, '')const fileName = `${fileNamePrefix}${time}.xlsx`XLSX.writeFile(wb, fileName)this.$message({type: 'success',message: '導出成功'})}

格式化數據為二維數組

// 數據格式為二維數組formatTableData() {const data = []let tableRef = nulltableRef = this.$refs.unitTestCoverTabledata.push(...this.unitTestCoverData)if (!tableRef) {console.error('找不到表格組件ref')return []}const array = []array[0] = []this.tableLabel = {}for (const obj of tableRef.columns) {if (obj.type === 'index') {array[0].push('序號')this.tableLabel['index'] = obj.width} else {array[0].push(obj.label)this.tableLabel[obj.property] = obj.width || obj.minWidth || obj.realWidth || 100}}data.forEach((item, index) => {const subArray = []for (const head of Object.keys(this.tableLabel)) {if (head === 'index') {subArray.push(index + 1)continue}if (item[head] !== undefined) {if (head === 'coverage' || head === 'branchCoverage') {subArray.push(`${item[head]}%`)} else {subArray.push(`${item[head]}`)}} else {subArray.push('')}}array.push(subArray)})console.log(array)return array}

console到控制臺看一眼是這樣的：
第一組對象為xsml表格第一排

總結

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

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