将页面中数据导出excel文件

方法一
1、安装

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

2、在src下新建文件夹，这里命名为excel，放入Blob.js 和 export2Excel.js

Blob.js 和export2Excel.js下载地址：

https://pan.baidu.com/s/1QuM49Iyjk09L0qPH2bk5rg 提取码：4yrr

3、配置
若是使用vuecli2,则在build文件夹下找到webpack.base.conf.js做如下修改

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//新增一行
    }
  },

若是使用vuecli3 或vuecli4,则在export2Excel.js内只要改动头部一行源码即可

改之前：
/* eslint-disable */
require('script-loader!file-saver');//保存文件用
require('script-loader!@/excel/Blob');//转二进制用
// require('./Blob');//转二进制用
require('script-loader!xlsx/dist/xlsx.core.min');//xlsx核心
...
改成：
/* eslint-disable */
require('script-loader!file-saver');//保存文件用
// require('script-loader!@/excel/Blob');//转二进制用
require('./Blob');//转二进制用
require('script-loader!xlsx/dist/xlsx.core.min');//xlsx核心

4、在.vue文件中
在methods里写这两个方法：其中list是表格的内容

 methods:{
    //数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        console.log(1)
        const { export_json_to_excel } = require('@/excel/export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        const tHeader = ['统一编号','海关编号','境内收发货人','提运单号']; // 导出的表头名信息
        const filterVal = ['unifiedNo','customsNo', 'teRsComanyName', 'deliveryNo']; // 导出的表头字段名，需要导出表格字段名
        // 数据来源
        // const list = that.excelData;
        //模拟数据
        const list =  [
          {unifiedNo:123,customsNo:5236514752, teRsComanyName:"小陈", deliveryNo:"lehr45468644"},
          {unifiedNo:456,customsNo:5845962748, teRsComanyName:"小李", deliveryNo:"lehr85236652"}
        ]
        const data = that.formatJson(filterVal, list);
        const excelName = "下载数据excel";
        export_json_to_excel(tHeader, data, excelName);// 导出的表格名称，根据需要自己命名
      })
    },
    //格式转换，直接复制即可
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }

方法二
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下

<template>
  <button @click="tableToExcel">导出</button>
</template>
  
  <script>
export default {
  data() {
    return {
      jsonData: [
        {
          name: "路人甲",
          phone: "123456",
          email: "123@123456.com"
        },
        {
          name: "炮灰乙",
          phone: "123456",
          email: "123@123456.com"
        },
        {
          name: "土匪丙",
          phone: "123456",
          email: "123@123456.com"
        },
        {
          name: "流氓丁",
          phone: "123456",
          email: "123@123456.com"
        }
      ]
    };
  },
  methods: {
    tableToExcel() {
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `姓名,电话,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < this.jsonData.length; i++) {
        for (let item in this.jsonData[i]) {
          str += `${this.jsonData[i][item] + "\t"},`;
        }
        str += "\n";
      }
      //encodeURIComponent解决中文乱码
      let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>