npm install -S vue-json-excel

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
</download-excel>

let json_fields = {
  // fieldLabel(表頭名)，attributeName(對應字段名)
  fieldLabel: attributeName,
  // 使用回調自定義導出數(shù)據(jù)
  anotherFieldLabel: {
    field: anotherAttributeName,
    callback: (value) => {
      return `formatted value ${value}`;
    },
  },
};

let json_data = [
    {
        attributeName: value1,
        anotherAttributeName: value2
    },
    {
        attributeName: value3,
        anotherAttributeName: value4
    }
];

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
</download-excel>

<template>
    <div id="app">
        <downloadexcel
            class            = "btn"
            :fetch           = "fetchData"
            :fields          = "json_fields"
            :before-generate = "startDownload"
            :before-finish   = "finishDownload">
            Download Excel
        </downloadexcel>
    </div>
</template>

<script>
import downloadexcel from "vue-json-excel";
import axios from 'axios';

export default {
    name: "App",
    components: {
        downloadexcel,
    },
    data(){
        return {
            json_fields: {
                'Complete name': 'name',
                'Date': 'date',
            },
        }
    }, //data
    methods:{
        async fetchData(){
            const response = await axios.get(URL);
            return response.data.holidays;
        },
        startDownload(){
            alert('show loading');
        },
        finishDownload(){
            alert('hide loading');
        }
    }
};
</script>

npm install -S xlsx
npm install -S xlsx-style

module.exports = {
	configureWebpack: {
    	externals: {
      		'./cptable': 'var cptable'
    	}
  	}
}

/**
 * create by lwj
 * @file 導出export插件封裝
 */

import * as styleXLSX from 'xlsx-style'

/**
 * 將 String 轉換成 ArrayBuffer 
 * @method 類型轉換
 * @param {String} [s] wordBook內容
 * @return {Array} 二進制流數(shù)組
 */
function s2ab (s) {
    let buf = null;

    if (typeof ArrayBuffer !== 'undefined') {
        buf = new ArrayBuffer(s.length);
        let view = new Uint8Array(buf);

        for (let i = 0; i != s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xFF;
        }

        return buf;
    }

    buf = new Array(s.length);

    for (let i = 0; i != s.length; ++i) {

        // 轉換成二進制流
        buf[i] = s.charCodeAt(i) & 0xFF;
    }

    return buf;
}

/**
 * 方案一：利用 URL.createObjectURL 下載 （以下選用）
 * 方案二：通過 file-saver 插件實現(xiàn)文件下載
 * @method 文件下載
 * @param {Object} [obj] 導出內容 Blob 對象
 * @param {String} [fileName] 文件名 下載是生成的文件名
 * @return {void}
 */ 
function saveAs (obj, fileName) {
    let aLink = document.createElement("a");

    if (typeof obj == 'object' && obj instanceof Blob) {
        aLink.href = URL.createObjectURL(obj); // 創(chuàng)建blob地址
    }
    
    aLink.download = fileName;
    aLink.click();
    setTimeout(function () {
        URL.revokeObjectURL(obj);
    }, 100);
}

/**
 * @method 數(shù)據(jù)導出excel
 * @param {Object} [worksheets] 工作表數(shù)據(jù)內容
 * @param {String} [fileName='ExcelFile'] 導出excel文件名
 * @param {String} [type='xlsx'] 導出文件類型
 */
export default function export2Excel ({
    worksheets, 
    fileName = 'ExcelFile',
    type = 'xlsx'
} = {}) {

    let sheetNames = Object.keys(worksheets);
    let workbook = {
        SheetNames: sheetNames, //保存的工作表名
        Sheets: worksheets
    };

    // excel的配置項
    let wopts = {  
        bookType: type,  // 生成的文件類型
        bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
        type: 'binary'  
    }

    // attempts to write the workbook
    let wbout = styleXLSX.write(workbook, wopts);
    let wbBlob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    });

    saveAs(wbBlob, fileName + '.' + type);
}

import XLSX from 'xlsx';
import export2Excel from '@/assets/utils/export2Excel';

// json 格式
let jsonTable = [{
    "sheet1id": 1,
    "表頭1": "數(shù)據(jù)11",
    "表頭2": "數(shù)據(jù)12",
    "表頭3": "數(shù)據(jù)13",
    "表頭4": "數(shù)據(jù)14"
}, {
    "sheet1id": 2, 
    "表頭1": "數(shù)據(jù)21",
    "表頭2": "數(shù)據(jù)22",
    "表頭3": "數(shù)據(jù)23",
    "表頭4": "數(shù)據(jù)24"
}];

// 二維數(shù)組格式
let aoa = [
    ['sheet2id', '表頭1', '表頭2', '表頭3', '表頭4'],
    [1, '數(shù)據(jù)11', '數(shù)據(jù)12', '數(shù)據(jù)13', '數(shù)據(jù)14'],
    [2, '數(shù)據(jù)21', '數(shù)據(jù)22', '數(shù)據(jù)23', '數(shù)據(jù)24']
]

function handleExportExcel () {
    
    // 使用 XLSX 內置的工具庫將 json 轉換成 sheet
    let worksheet1 = XLSX.utils.json_to_sheet(jsonTable);

    // 使用 XLSX 內置的工具庫將 aoa 轉換成 sheet
    let worksheet2 = XLSX.utils.aoa_to_sheet(aoa);

    // 設置 excel 表格樣式
    worksheet1["B1"].s = { 
        font: { 
            sz: 14, 
            bold: true, 
            color: { 
                rgb: "FFFFAA00"
            } 
        }, 
        fill: { 
            bgColor: { 
                indexed: 64 
            }, 
            fgColor: { 
                rgb: "FFFF00" 
            } 
        } 
    };

    // 單元格合并
    worksheet1["!merges"] = [{
        s: { c: 1, r: 0 },
        e: { c: 4, r: 0 }
    }];

    export2Excel({
        worksheets: {
            sheet1: worksheet1,
            sheet2: worksheet2
        }, // 導出excel的數(shù)據(jù)，key表示工作表名，value表示對應工作表的 sheet 數(shù)據(jù)，支持導出多個工作表
        fileName: '我的excel', // 導出文件名
        type: 'xlsx' // 文件導出類型
    });
}