@fe-components/excel NPM

excel

纯前端导入导出 excel

Introduction

纯前端实现导入导出 excel，经测试，1 万条数据导出，除去网络请求时间，导出的占用时间不超过 3 秒。

表格导出
带图导出
自定义列宽度
导出回调

Install

yarn add @fe-components/excel

⬆ Back to Top

Usage

<template>
  <el-button
    type="success"
    @click="handleExportExcel"
    style="padding: 8px 20px; cursor: pointer"
  >
    {{ loading ? 'loading...' : 'export-excel' }}
  </el-button>
</template>

<script>
// in real project, you should import function like this
import {exportExcel} from '@fecomponents/excel-it'

export default {
  name: 'StaticJsonExportToExcel',
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '图片',
          minWidth: 70,
          key: 'imgUrl'
        },
        {
          title: '货号',
          minWidth: 100,
          key: 'goodsModel'
        },
        {
          title: 'SPU编码',
          minWidth: 124,
          key: 'goodsNo'
        },
        {
          title: '商品名称',
          minWidth: 180,
          key: 'goodsName'
        },
        {
          title: '品类',
          minWidth: 140,
          key: 'categoryNamePath'
        },
        {
          title: '品牌',
          minWidth: 120,
          key: 'brandNameEn'
        }
      ],
      data: [
        {
          imgUrl: '',
          goodsModel: '123323',
          goodsNo: '22222',
          goodsName: '商品名称',
          categoryNamePath: '品类',
          brandNameEn: 'nike'
        }
      ]
    }
  },
  methods: {
    handleExportExcel() {
      this.loading = true

      /**
       * 受限于 styleguide 无法使用 import
       * 因此在 styleguide 配置已经将
       * `exportExcel` 挂载到 `window`
       */
      exportExcel(
        {
          columns: this.columns, //header
          data: this.data, //list
          filename: 'gameManageList', //文件名称
          sheetName: '游戏管理列表', //sheetName 默认 Sheet1
          imageKeys: [
            //图片key 只有导出含图需要
            {
              name: 'imgUrl',
              imgWidth: '100',
              imgHeight: '100'
            }
          ]
        },
        () => {
          //回调函数
          this.loading = false
        }
      )
    }
  }
}
</script>

⬆ Back to Top