vue-element,将表格导出为excel

最新推荐文章于 2024-09-21 16:07:18 发布

艾尔熙德15

最新推荐文章于 2024-09-21 16:07:18 发布

阅读量117

点赞数

分类专栏： vue-element 文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/aecho15/article/details/115456796

版权

vue-element 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1安装插件

npm install --save xlsx file-saver

2在文件中引用

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3代码实现

<template>
  <div>
    <div class="index_search">
        <el-button
          size="mini"
          type="success"
          @click="outExcel"
          >导出</el-button>
    </div>
    <el-table
      id="outtable"
      :data="tableData"
      style="width: 100%"
      stripe
      border
      show-header
      height="73vh"
      highlight-current-row
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column
        type="index"
        align="center"
        width="60"
        label="序号"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [],//表格数据
    };
  },
  methods: {
    //导出
    outExcel() {
      /* out-table关联导出的dom节点  */
      var wb = XLSX.utils.table_to_book(document.querySelector("#outtable"));
      /* 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;
    }
  }
};
</script>