<template>
	<el-button
       @click="download()"
       type="info"
       style="float: right; padding: 10px 15px">
     導(dǎo)出Excel
    </el-button>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
    data(){
        return{
            datalist:[
                {
                    id:1,
                    name:"蕭炎",
                    age:21,
                    account:15032623621,
                    skill:"毀滅火蓮",
                    gender:"男",
                },{
                    id:2,
                    name:"蕭薰兒",
                    age:20,
                    account:15032628986,
                    skill:"帝印決",
                    gender:"女"
                },{
                    id:3,
                    name:"藥老",
                    age:25,
                    account:16632623621,
                    skill:"煉丹",
                    gender:"男"
                },{
                    id:4,
                    name:"小醫(yī)仙",
                    age:18,
                    account:17732623621,
                    skill:"天陰毒手",
                    gender:"女"
                },{
                    id:5,
                    name:"美杜莎",
                    age:20,
                    account:18832623621,
                    skill:"千鈞引雷"
                    gender:"女"
                },
            ]
        }
    },
    methods:{
        // 導(dǎo)出EXCEL文件方法
        download() {
          // 從Vue組件的data屬性中獲取userlist數(shù)據(jù)
          const data = this.userlist;
          // 將JSON格式的數(shù)據(jù)轉(zhuǎn)換為工作表(worksheet)
          // XLSX.utils.json_to_sheet()方法接受一個(gè)數(shù)組，其中每個(gè)元素是一個(gè)對(duì)象，代表Excel中的一行
          // 這里的data變量應(yīng)該是一個(gè)數(shù)組，數(shù)組中的每個(gè)對(duì)象包含將要寫(xiě)入Excel的行數(shù)據(jù)
          const worksheet = XLSX.utils.json_to_sheet(data);
          // 創(chuàng)建一個(gè)新的工作簿(workbook)
          // 工作簿是Excel文件中的頂級(jí)容器，可以包含多個(gè)工作表
          const workbook = XLSX.utils.book_new();
          // 將工作表添加到工作簿中
          // 'Sheet1'是工作表的名稱(chēng)，你可以根據(jù)需要修改它
          XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
          // 將工作簿保存為Excel文件，并觸發(fā)下載
          // 'data.xlsx'是導(dǎo)出的文件名，你可以根據(jù)需要修改它
          // 這個(gè)方法會(huì)生成一個(gè).xlsx文件，并提示用戶(hù)下載
          XLSX.writeFile(workbook, 'data.xlsx');
        },
    }
}
</script>

npm install xlsx --save

const data = [
  { name: '張三', age: 20, gender: '男' },
  { name: '李四', age: 25, gender: '女' },
  { name: '王五', age: 30, gender: '男' }
];

import * as XLSX from 'xlsx';
export default {
  methods: {
    exportToExcel() {
      // 將數(shù)據(jù)轉(zhuǎn)換為工作表
      const worksheet = XLSX.utils.json_to_sheet(this.data);
      // 創(chuàng)建工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      // 導(dǎo)出Excel文件
      XLSX.writeFile(workbook, 'data.xlsx');
    }
  }
}

<template>
  <div>
    <button @click="exportToExcel">導(dǎo)出為Excel</button>
  </div>
</template>

// 設(shè)置列寬
const columns = ['name', 'age', 'gender'];
const columnWidths = [20, 10, 10];
XLSX.utils.column_width_set(worksheet, columnWidths);
// 設(shè)置單元格樣式
const cell = worksheet['A1'];
cell.s = { font: { bold: true } };