VUE导出数据为excel，xlsx

npm需要安装插件：

npm install --save file-saver xlsx

代码如下：

<template>

  <a-table :columns="columns" :data-source="data" id="out-table">

    <a slot="name" slot-scope="text">{{ text }}</a>

    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>

    <span slot="tags" slot-scope="tags">

      <a-tag

        v-for="tag in tags"

        :key="tag"

        :color="

          tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'

        "

      >

        {{ tag.toUpperCase() }}

      </a-tag>

    </span>

    <span slot="action" slot-scope="text, record">

      <a>Invite 一 {{ record.name }}</a>

      <a-divider type="vertical" />

      <a>Delete</a>

      <a-divider type="vertical" />

      <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>

    </span>

  </a-table>

</template>

<script>

import FileSaver from "file-saver";

import XLSX from "xlsx";

const columns = [

  {

    dataIndex: "name",

    key: "name",

    slots: { title: "customTitle" },

    scopedSlots: { customRender: "name" },

  },

  {

    title: "Age",

    dataIndex: "age",

    key: "age",

  },

  {

    title: "Address",

    dataIndex: "address",

    key: "address",

  },

  {

    title: "Tags",

    key: "tags",

    dataIndex: "tags",

    scopedSlots: { customRender: "tags" },

  },

  {

    title: "Action",

    key: "action",

    scopedSlots: { customRender: "action" },

  },

];

const data = [

  {

    key: "1",

    name: "John Brown",

    age: 32,

    address: "New York No. 1 Lake Park",

    tags: ["nice", "developer"],

  },

  {

    key: "2",

    name: "Jim Green",

    age: 42,

    address: "London No. 1 Lake Park",

    tags: ["loser"],

  },

  {

    key: "3",

    name: "Joe Black",

    age: 32,

    address: "Sidney No. 1 Lake Park",

    tags: ["cool", "teacher"],

  },

];

export default {

  name: "login",

  data() {

    return {

      data,

      columns,

    };

  },

  methods: {

    onChange() {},

    //da导出表格

    exportExcel() {

      /* generate workbook object from table */

      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));

      /* get binary string as output */

      var wbout = XLSX.write(wb, {

        bookType: "xlsx",

        bookSST: true,

        type: "array",

      });

      try {

        FileSaver.saveAs(

          new Blob([wbout], { type: "application/octet-stream" }),

          "订单详情.xlsx"

        );

      } catch (e) {

        if (typeof console !== "undefined") console.log(e, wbout);

      }

      return wbout;

    },

    // 导入表格

  },

  mounted() {

    this.exportExcel();

  },

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>