vue框架vue-element-admin-master导出excel表格数据

前言：

---

加QQ技术交流群741843152，一起讨论哦~~~~
欢迎访问我个人博客，里面有更多干货哟~~：点击即可访问
这段时间在做一个后台管理系统时，需要导出后台管理系统从远程服务器中获取到的所有数据。顿时有点蒙，不知道改如何下手写代码，多亏了前端交流群的一位大哥教了我方法，再此再次表示感谢，现在记录下来分享给大家，希望这篇文章对你们有所帮助，欢迎扫描左边关注个人公众号，看文章更加方便和更加及时。

---

关注博主微信公众号，获取更多关于前端的干货哦

一、官方文档

老规矩，先附上官方文档的链接:https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/excel.html#excel-%E5%AF%BC%E5%87%BA

二、安装插件

在你vue项目中的分别输入以下两行代码，安装依赖

npm install xlsx file-saver -S
npm install script-loader -S -D

三、在src目录下创建一个文件夹vendor,并且引入 Export2Excel.js

注意：这步很重要，步引入这两个文件，会报错的， 别问为什么知道，太不容易了哈哈哈

• 附上这两个代码的链接，希望各位动动贵手点个star哦:https://github.com/XiaoFanZhou-code/vendor
• 如果嫌弃Github打开速度太慢，请访问这个: https://gitee.com/woaink/vendor
• 直接打开复制粘贴就好哦！

四、 HTML代码

注：那那些table表格的代码我就不写了，根据你个人项目需求来自己写就好，在element-ui上就有相关的组件库使用。
为了页面效果更加好看一些，需要加一个导出按钮(button)，并且绑定一个监听事件，如下所示

<el-button
  type="primary"
  plain
  class="iconfont icon-yijiandaochu"
  style="margin-left: 510px"
  :loading="downloadLoading" // 转圈圈效果
  @click="exportExcel">导出</el-button>

五、js代码，所要导出的数据

tableData: [
    {
      id: 1,
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
      tag: "家"
    },
    {
      id: 2,
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄",
      tag: "公司"
    },
    {
      id: 3,
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄",
      tag: "家"
    },
    {
      id: 4,
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
      tag: "公司"
    },
    {
      id: 5,
      date: "2016-04-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
      tag: "公司"
    }
  ],

六、一键导出功能也就是按钮监听事件

handleDownload() {
  // this.downloadLoading = true;
  import("@/vendor/Export2Excel").then(excel => {
    const tHeader = ["id", "date", "name", "address", "tag"];//要导出后表头是什么，可以跟tableDate中的表头不一致
    const filterVal = [
      "id",
      "date",
      "name",
      "address",
      "tag"
    ];
    const data = this.formatJson(filterVal, this. tableData)
    // const data = this.tableData;
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: "table-list"  //导出文件的名，自定义就好
    });
    // this.downloadLoading = false;
  });
},
//下载方法中，需要用到的格式化json的方法
formatJson(filterVal, jsonData) {
  return jsonData.map(v =>
    filterVal.map(j => {
      if (j === "id") {  //此处如没有要格式化的列，可以不用此判断
        // return parseTime(v[j])
        return v[j];
      } else {
        return v[j];
      }
    })
  );
},

按照以上步骤来就能实现一键导出功能啦~~

https://nanxuan2020.oss-cn-hangzhou.aliyuncs.com/v2-148f2762190be75bf4090f8dcdd9e4c7_1440w.jpg

前言

Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue。

注意。前提是已经安装npm

步骤

首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。

1. 打开命令行窗口，输入。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 获取到cnpm以后，我们需要升级一下，输入下面的命令
3. 因为安装Vue需要npm的版本大于3.0.0，所以我们要升级一下，然后我们输入下面的命令，安装vue。

cnpm install vue

4. 接下来安装vue-cli

cnpm install -g @vue/cli

至此所有的vue环境已经搭建好了

window键+R键，输入cmd弹出终端，输入vue -V 弹出以下效果说明已经安装成功