element表格导出execl文件【竟然是......】

最新推荐文章于 2024-08-21 15:41:43 发布

M - 飞

最新推荐文章于 2024-08-21 15:41:43 发布

阅读量182

点赞数 1

文章标签： vue.js npm

本文链接：https://blog.csdn.net/weixin_59727891/article/details/126677945

版权

本文介绍了如何在Vue.js项目中利用xlsx库和file-saver库实现表格数据的导出为Excel文件。首先通过npm安装所需的库，然后创建一个util文件用于导出Excel。在页面组件中，定义导出Excel的方法，展示原始表格，并在预览弹窗中确认导出。用户可以选择表格中的数据进行导出，点击确定后将数据以Excel格式保存。

摘要由CSDN通过智能技术生成

1.安装xlsx库

npm install xlsx

2.安装file-saver库

npm install file-saver

3.新建 src/utils/excel.js文件

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

const  toExcel = {
    getExcel(dom,title='默认标题',){
        var excelTitle = title;
        var wb = XLSX.utils.table_to_book(document.querySelector(dom));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});
        try {
            FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream" }),
                excelTitle + ".xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
    }
};

export default  toExcel;

4.在页面使用函数

<template>
  <div>
    <!--导出按钮-->
    <el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
    <!--原始表格-->
    <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          type="selection"
      >
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
      >
      </el-table-column>
      <el-table-column label="详细地址">
        <el-table-column
            prop="province"
            label="省份"
        >
        </el-table-column>
        <el-table-column
            prop="city"
            label="市区"
        >
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
        >
        </el-table-column>
        <el-table-column
            prop="zip"
            label="邮编"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template>
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--预览弹窗表格-->
    <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
      <el-table :data="selectData" id="selectTable" height="380px">
        <el-table-column
            prop="date"
            label="日期"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
        >
        </el-table-column>
        <el-table-column label="详细地址">
          <el-table-column
              prop="province"
              label="省份"
          >
          </el-table-column>
          <el-table-column
              prop="city"
              label="市区"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
          >
          </el-table-column>
          <el-table-column
              prop="zip"
              label="邮编"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportExcel">确定保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import toExcel from '@/utils/excel'
export default {
  name: "demoView",
  data(){
    return{
      //表格数据
      tableData: [
        {
          date: '2016-05-03',
          name: '王小天',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小明',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小智',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小红',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小华',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小丽',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小花',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      //表格中选中的数据
      selectData:[],
      selectWindow:false,
    }
  },
  methods:{
    //导出
    exportExcel() {
      toExcel.getExcel('#selectTable','导出的自定义标题')
    },
    //显示预览弹窗
    exportExcelSelect(){
      if (this.selectData.length < 1){
        this.$message.error('请选择要导出的内容！');
        return false;
      }
      this.selectWindow = true;
    },
    //选中数据
    handleSelectionChange(val) {
      this.selectData = val;
    }
  }
}
</script>

<style scoped>

</style>