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以下，且數據量不大的情況下可以考慮使用前端方法。