简单VUE项目-Excel导出组件

最新推荐文章于 2023-09-19 00:08:05 发布

田秋浩

最新推荐文章于 2023-09-19 00:08:05 发布

阅读量234

点赞数

分类专栏：前端技术文章标签： vue.js excel javascript

本文链接：https://blog.csdn.net/tianqiuhao/article/details/129946827

版权

前端技术专栏收录该内容

15 篇文章 0 订阅

订阅专栏

需求

在页面表格前加导出按钮，导出当前页数据。
在多个页面使用，设计成组件。

package.json

"dependencies": {
    "file-saver": "2.0.1",
    "xlsx": "0.14.1"
  },

module

<template>
  <div>
    <el-button type="text" @click="export" style="padding: 0px;font-weight: bold;">导出</el-button>
  </div>
</template>
<script lang="js">
import * as XLSX from 'xlsx/xlsx.js';
import FileSaver from 'file-saver';
import dataFormatUtil from '@/api/dataFormatUtil';//这里注意@表示root目录

export default {
  props: {
    tableId: {
      type: String,
      default() {
        return "";
      }
    },
    listData: {
      type: Array,
      default() {
        return [];
      }
    },
    excelTitle: {
      type: String,
      default() {
        return "excel";
      }
    }
  },
  methods: {
    exportTable(){ //导出表格
      if(this.listData.length !== 0){
        // 导出文件名
        let now = new Date();
        let timePart = dataFormatUtil.format(now, "yyyy-MM-dd");//日期格式化工具
        let filename = this.excelTitle + "_" + timePart;
        // 通过id，获取导出的表格数据
        let content = XLSX.utils.table_to_book(document.getElementById(this.tableId), {raw: true});
        let out = XLSX.write(content, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            new Blob([out], {
              type: "application/octet-stream",
            }),
            filename + ".xlsx"
          );
        } catch (e) {
          console.log(e);
        }
        return out;
      }else{
        this.$message({
          message: '请查询要导出的数据',
          type: 'warning'
        })
      }
    },
  }
}
</script>

调用

<div class="tableTitle" style="display: flex">
  <span style="flex: 1">数据列表</span>
  <export-excel table-id="tableList" :list-data="list" excel-title="excel标题"></export-excel>
</div>
<el-table
  :data="list"
  id="tableList">

备注

数据列表span中的flex:1意味着将flex item的flex-grow，flex-shrink，和flex-basis三个属性设置为以下值：flex-grow: 1;flex-shrink: 1;flex-basis: 0%;
- flex 是弹性，display为flex属性的可以称为弹性容器，弹性容器中的子节点可以称为弹性项，感觉是为了适配不同屏幕设计出来的。
- 在本例中，由于导出按钮处未设置flex:1，所以数据列表中可以扩展到整行。
本例中table的id属性需要注意在不同的template中的唯一，如果一样会出问题。这个应该是常识，咱太小白了。