【vue】JSON数据导出excel

前言 导出方式有很多种，但是若只需要数据导出成.xlsx文件并下载的话，只用xlsx一个插件就行 目标

1 实现数据导出excel

准备工作

1 安装

npm i xlsx -S

2 引入

npm i xlsx -S

二、导出excel

AOA方式导出

    exportAOAToExcel() {
       // 表中数据
        const list = [
          ["2016-05-03", "Tom", "No. 189, Grove St, Los Angeles"],
          ["2016-05-03", "1", "No. 189, Grove St, Los Angeles"],
          ["2016-05-03", "2", "No. 189, Grove St, Los Angeles"],
          ["2016-05-03", "3", "No. 189, Grove St, Los Angeles"],
        ];
        const header = ["日期", "姓名", "地址"]; // 自定义的表头数组
        const wb = XLSX.utils.book_new(); // 创建文件
        const ws = XLSX.utils.aoa_to_sheet([header,...list||[]]); // 将数据和表头转换为工作表
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 工作簿名Sheet1
        XLSX.writeFile(wb , Date.now()+".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件
    },

JSON方式导出

 exportJSONToExcel(){
        const list = [
            {date:'2016-05-03',name:'1',address:'No. 1, Grove St, Los Angeles'},
            {date:'2016-05-03',name:'2',address:'No. 2, Grove St, Los Angeles'},
            {date:'2016-05-03',name:'3',address:'No. 3, Grove St, Los Angeles'},
            {date:'2016-05-03',name:'4',address:'No. 4, Grove St, Los Angeles'},
        ];
        const header = ["日期", "姓名", "地址"]; // 自定义的表头数组
        const dataForExcel = list.map((item) => ({
          '日期': item.date,
        '姓名': item.name,
          '地址': item.address,
        }));
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.json_to_sheet(dataForExcel, {header: header}); // 将数据和表头转换为工作表
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb,Date.now()  +".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件
    }

效果