首先需要下載外掛"xlsx":"^0.15.6"

然後在mainjs當中引入xlsx

並進行全域性方法的封裝

import XLSX from 'xlsx'
/**
 * @function 生成表格的方法
 * @param {String} excelName 檔名
 * @param {Array} titleArr 資料表頭顯示
 * @param {Array} dataArr 資料內容顯示
 */
 const ToDoExcel = (excelName, titleArr, dataArr) => {
  var filename = excelName + ".xlsx" //檔名稱
  var data = [titleArr, ...dataArr]  //資料，一定注意需要時二維陣列
  var ws_name = "Sheet1" //Excel第一個sheet的名稱
  var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(data)
  XLSX.utils.book_append_sheet(wb, ws, ws_name)  //將資料新增到工作薄
  XLSX.writeFile(wb, filename)
}
Vue.prototype.$ToDoExcel = ToDoExcel

最後在頁面呼叫

 computed: {
      //  定義表頭資料
      titleArr() {
        let arr = []
        this.columns.map((item)=> {
            arr.push(item.title)
        })
        return arr
      }
    },
    methods: {
         ToDoExcel() {
//  這裡是請求介面   這樣寫的話，一般不傳分頁引數   就會匯出全部資料
        getOrderInfo()
          .then(res => {
            console.log(res)
            // 定義表格資料
            let arr = []
            res.map(item => {
              arr.push([
                item.orderNo,
                item.sendNo,
                item.statusClothes,
                item.idClothes,
              ])
            })
            // 呼叫匯出EXCEL的方法
            this.$ToDoExcel(`訂單資訊`, this.titleArr, arr)
          })
    }

可以加我公眾號 我們一起交流學習