vue 前端拼接数据,导出excel

数据:

excelData: [
        {
          name: 红烧鱼, size: 大, taste: 微辣, price: 40, remain: 100,
        },
        {
          name: 麻辣小龙虾, size: 大, taste: 麻辣, price: 138, remain: 200,
        },
        {
          name: 清蒸小龙虾, size: 大, taste: 清淡, price: 138, remain: 200,
        },
        {
          name: 香辣小龙虾, size: 大, taste: 特辣, price: 138, remain: 200,
        },
        {
          name: 十三香小龙虾, size: 大, taste: 中辣, price: 138, remain: 108,
        },
        {
          name: 蒜蓉小龙虾, size: 大, taste: 中辣, price: 138, remain: 100,
        },
        {
          name: 凉拌牛肉, size: 中, taste: 中辣, price: 48, remain: 60,
        },
        {
          name: 虾仁寿司, size: 大, taste: 清淡, price: 29, remain: 无限,
        },
        {
          name: 海苔寿司, size: 大, taste: 微辣, price: 26, remain: 无限,
        },
        {
          name: 金针菇寿司, size: 大, taste: 清淡, price: 23, remain: 无限,
        },
        {
          name: 泡菜寿司, size: 大, taste: 微辣, price: 24, remain: 无限,
        },
        {
          name: 鳗鱼寿司, size: 大, taste: 清淡, price: 28, remain: 无限,
        },
        {
          name: 肉松寿司, size: 大, taste: 清淡, price: 22, remain: 无限,
        },
        {
          name: 三文鱼寿司, size: 大, taste: 清淡, price: 30, remain: 无限,
        },
        {
          name: 蛋黄寿司, size: 大, taste: 清淡, price: 20, remain: 无限,
        },
      ],

npm 安装依赖: "xlsx": "^0.17.4"

dom:

<button @click="exportDialy(excelData)">导出excel</button>

方法 :

exportDialy (json) {
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(json);

      XLSX.utils.book_append_sheet(wb, ws, ws_name);
      XLSX.writeFile(wb, downName.xlsx);
    },

参考评论处: https://segmentfault.com/a/1190000011057149

经验分享 程序员 微信小程序 职场和发展