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如下，且數據量不大的狀況下能夠考慮使用前端方法。