vue 纯前端导出 excel 表格

在开发后台管理系统的时候，很多地方都要用到导出excel 表格，比如将table中的数据导出到本地，那么实现这种需求往往有两种方案：

一、后端开发一个下载链接，前端将这个链接放到 a 标签的 href 中，一点就能下载。

　　优点：对于前端来说实现简单，不用写过多的代码，也不依赖第三方库，兼容性好

　　缺点：如果前端操作数据更改了，需要发给后端才能导出

二、前端借助一些第三方库实现

下面以vue项目为例：

首先需要安装三个依赖

npm install file-saver xlsx -S
// 加载script 需要
npm install script-loader -D

或者使用 yarn 安装

yarn add file-saver xlsx -S
yarn add script-loader -D

在 /src 目录下新建 vendor文件夹，用于存放 Blob.js 和 Export2Excel.js 文件，这两个文件可以再 CSDN 上下载，当然如果没有积分的 可以去我的 gitHub 上下载。

注意：如果不叫 vendor 名字，则需要修改 Export2Excel.js 中的代码。

 

配置webpack，这里使用的是 vue-cli 2.9 搭建的项目，如果使用vue-cli3 请自行百度

在 /build/webpack.base.config.js 的resolve 模块中添加一个别名

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': path.resolve(__dirname, 'src/vendor') // 添加一个别名
    }
  }

那么接下来就是在vue项目中使用就行了

<template>
    <div :class="$options.name">
        <button @click="exportExcel">导出表格</button>
    </div>
</template>

<script>
export default {
    name: 'export',
    data() {
        return {
            loading: false
        };
    },
    methods: {
        exportExcel() {
            let sourceOriginAmount = [
                {
                    goodsName: '苹果',
                    sourceCode: '123'
                },
                {
                    goodsName: '香蕉',
                    sourceCode: '234'
                }
            ]; // 需要导出的数据，可以动态获取
            this.loading = true; // 设置一个loading，生成Excel需要时间
            import('@/vendor/Export2Excel.js').then(excel => { // 导入js模块
                const tHeader = ['编号', '商品名称', '溯源码']; // 导出excel 的标题
                const filterVal = ['index', 'goodsName', 'sourceCode']; // 每个标题对应的字段

                const list = (sourceOriginAmount || []).map((item, key) => { // 通过 map 方法遍历，组装数据成上面的格式
                    return {
                        index: key + 1,
                        goodsName: item.goodsName,
                        sourceCode: item.key
                    };
                });

                if (list) {
                    const data = this.formatJson(filterVal, list); // 生成json数据
                    excel.export_json_to_excel({ // 调用excel方法生成表格
                        header: tHeader,
                        data,
                        filename: this.goodsName
                    });
                } else {
                    alert('暂无无数据');
                }
                this.loading = false;
            })
        },
        formatJson (filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
        }
    }
};
</script>

 

可以参考 iview 组件库中的 table 表格  https://www.iviewui.com/components/table#DCcsv

兼容性，据测试，IE9以上都支持，但是在IE9上导出中文会有乱码，如果项目不要求兼容到IE9以下，且数据量不大的情况下可以考虑使用前端方法。