Fengshangyunwang front-end XLSX export table xlsx file plug-in use in vue

The XLSX export table xlsx file plugin in vue uses:

 

 

 

 

1. Install dependent packages in your own project:

npm install --save xlsx file-saver

2. Import the required pages:

// 引入file插件
import FileSaver from "file-saver";
// 引入xlsx插件
import * as XLSX from "xlsx";

3. An example:
 

<template>
  <div class="hello">
    <!-- 表格导出 -->
    <el-card shadow="hover">
      <el-button type="success" icon="el-icon-download" @click="exportExcel()"
        >导出表格</el-button
      >
      <el-table :data="tableData" id="tableId" border style="width: 50%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// 引入file插件
import FileSaver from "file-saver";
// 引入xlsx插件
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  methods: {
    exportExcel() {
      //导出当前表格
      var wb = XLSX.utils.table_to_book(document.querySelector("#tableId")); //表格id
      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>
<style>
</style>

If you don’t understand anything, please use Fengshang Cloud Search~ 

Fengshangyunwang-Fengshangyunsearch: We are committed to faster and more complete search! The interface is continuously updated! Stay tuned! ! ! Fengshangyunwang-Fengshangyunsearch: We are committed to faster and more complete search! The interface is continuously updated! Stay tuned! ! ! http://1813783665.3vzhuji.cc/caidan/sou.html