vue 纯前端导出 excel 表格

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

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

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

　　缺点：若是前端操做数据更改了，须要发给后端才能导出

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

下面以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如下，且数据量不大的状况下能够考虑使用前端方法。