前端json導出.xlsx並通過瀏覽器下載到本地

一、使用模塊file-saver，js-export-excel

安裝方法：

npm install file-saver

npm install js-export-excel

二、代碼

<script lang="ts">
    import FileSaver from 'file-saver'
    import ExportJsonExcel from 'js-export-excel'
    export default class Table extends Vue {
        // 導出csv
        outputCSV() {
            var option: any = {
              datas: [ //可多張sheet
                { 
                  sheetData: [], //數據
                  // sheetName: 'sheet', //左下角tab頁的sheet名
                  sheetFilter: ['a', 'b' , 'c'], // json的key，需要和header的每一項順序對應
                  sheetHeader: ['姓名', '年齡', '性別'] //.xlsx的表頭
                  // columnWidths: [20, ''] //表格寬度
                 }
               ]
            } 
            // 設置數據
            option.datas[0].sheetData = [
                {
                    "a": '張三',
                    "b": '26',
                    "c": '男'
                },
                {
                    "a": '小紅',
                    "b": '22',
                    "c": '女'
                },
                {
                    "a": '小蘭',
                    "b": '24',
                    "c": '女'
                },
            ]
            let toExcel: any = new ExportJsonExcel(option)
            toExcel.saveExcel()
        }
    }
</script>

三、效果圖