前端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>

三、效果图