vue @femessage/excel-it

原创已于 2022-07-15 22:55:10 修改 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-07-15 22:46:56 首次发布

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何通过Yarn安装femessage/excel-it插件，并展示如何在Vue应用中利用该插件实现数据表格的下载功能，包括引入模板、配置列和触发导出操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载插件

yarn add @femessage/excel-it

2.使用的页面引入插件

import {exportExcel} from '@femessage/excel-it'

3.创建文件夹写入需要下载的模板
在这里插入图片描述
4.引入模板文件

import {templateColumns} from '../../../../const/export-goods-template-columns'

5.使用组件

//<html>部分
<template>
  <div>
    <el-button type="text" size="middle" @click="exportTable">下载</el-button>
  </div>
</template>
<script>
  export default {
    data() {
    return {
      failureInfo: [],
    }
  },
  //点击事件
exportTable() {
      exportExcel(
        {
          columns: Object.keys(templateColumns).map(k => ({
            prop: k,
            label: templateColumns[k],
          })),
          data: this.failureInfo,
          //下载的文件名
          fileName: '商品信息表',
        },
        () => {
          this.$message.success('导出表格成功')
        },
      )
    },
  }
</script>