Vue 导出Excel文件

1.安装依赖

npm install file-saver --save

npm install xlsx --save

npm install script-loader --save-dev

2.下载需要的js文件Blob.js和 Export2Excel.js

下载链接：https://download.csdn.net/download/liuxiaoxiaosmile/10345153

3.在项目src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去

4.更改webpack.base.conf.js配置，加入

'vendor': path.resolve(__dirname, '../src/vendor')

效果如图:

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'vendor': path.resolve(__dirname, '../src/vendor')
  }
}

5. test.vue

<el-button @click="export2Excel">导出</el-button>
  data() {
    return {
      list: null,
      listLoading: true,
      itemList: [
        {
          name: "红木",
          type: "P000001",
          price: "￥88888"
        },
        {
          name: "水杉",
          type: "P000002",
          price: "￥2000"
        }
      ]
    };
  },
  methods: {
    formatJson(filterField, jsonData) {
      return jsonData.map(function(dataObj) {
        return filterField.map(function(field) {
          let fieldObj = dataObj[field];
          // if (utils.isEmpty(fieldObj)) {
          //   fieldObj = "--";
          // }
          return fieldObj;
        });
      });
    },
    export2Excel() {
      require.ensure([], () => {
        let { export_json_to_excel } = require("@/vendor/Export2Excel");
        let tHeader = ["名称", "类型", "价格"];
        let filterField = ["name", "type", "price"];
        let list = this.itemList;
        let data = this.formatJson(filterField, list);
        // let timeFormat = moment().format("YYYYMMDDHHmmss");
        let title = "产品列表";
        export_json_to_excel(tHeader, data, title);
      });
    }
  }