vue中使用xlsx插件导出多sheet excel实现方法

安装xlsx,一定要注意版本:

复制代码
npm i xlsx@0.17.0 -S

package.json:

复制代码
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "element-ui": "^2.15.12",
    "file-saver": "^2.0.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "xlsx": "^0.17.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.11"
  }
}

App.vue:

复制代码
<template>
  <div id="app">
    <el-button type="primary" @click="exportExcel">vue xlsx导出多sheet excel</el-button>
  </div>
</template>

<script>
  import XLSX from "xlsx";
  export default {
    methods: {
      exportExcel() {
        var data1 = [
          ["id", "name", "hot"],
          [1, "C++", 99],
          [2, "JavaScript", 98]
        ];
        var data2 = [
          ["id", "语言", "热度"],
          [1, "C++", 99],
          [2, "JavaScript", 98]
        ];
        const ws1 = XLSX.utils.aoa_to_sheet(data1);
        const ws2 = XLSX.utils.aoa_to_sheet(data2);

        /* generate workbook and add the worksheet */
        const wb = XLSX.utils.book_new();
        // XLSX.utils.book_append_sheet(wb, ws, "test");
        XLSX.utils.book_append_sheet(wb, ws1, "月度统计报表");
        XLSX.utils.book_append_sheet(wb, ws2, "隔离库");

        /* save to file */
        XLSX.writeFile(wb, "test.xlsx");
      }
    }
  };
</script>
相关推荐
gplitems1232 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木4 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350234 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:5 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
90后的晨仔6 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗6 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗6 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥6 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
90后的晨仔7 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔7 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js