antd-vue實現導出excel

 

首先需要下載插件    "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)
          })
    }