:sparkles:添加导出表格

build/webpack.dev.conf.js

@@ -43,7 +43,7 @@ module.exports = merge(baseConfig, {
     contentBase: path.resolve(__dirname, '../dist'), //告诉服务其从哪提供内容
     hot: true,
     open: true,
-    host: '192.168.1.128'
+    // host: '192.168.1.128'
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(), // 开启热更新

package.json

@@ -43,8 +43,11 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
+    "file-saver": "^2.0.2",
     "nprogress": "^0.2.0",
     "vue-router": "^3.0.3",
-    "vuex": "^3.1.0"
+    "vuex": "^3.1.0",
+    "xlsx": "^0.16.7",
+    "xlsx-style": "^0.8.13"
   }
 }

src/pages/mobile/Mobile.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form :model="efunParams" ref="efunParams" class="clearfix topForm">
+      <el-form :model="efunParams" ref="efunParams" class="clearfix topForm" style="float: left">
         <div class="leftForm-skill">
           <el-form-item
             style="display:flex;"
@@ -43,15 +43,19 @@
           <el-button type="primary" @click="submitForm('efunParams')">搜索</el-button>
         </el-form-item>
       </el-form>
-      <el-table :data="channelData" border style="width: 100%" :height="tableHeight">
+      <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
+      <el-table id="table" :data="channelData" border style="width: 100%" :height="tableHeight">
         <el-table-column
           label="日期"
-          prop="day"
           fixed
           align="left"
           header-align="center"
-          min-width="120px"
-        ></el-table-column>
+          min-width="140px"
+        >
+            <template slot-scope="scope">
+                <span>{{changeDate(scope.row.day)}}</span>
+            </template>
+        </el-table-column>
         <el-table-column label="流量与观看" header-align="center">
           <el-table-column
             label="UV"
@@ -190,6 +194,7 @@
 <script>
 import { mapGetters } from "vuex";
 import formatDate from "../../utils/formatTime";
+import downTable from '@/utils/downTable'
 export default {
   data() {
     return {
@@ -265,6 +270,30 @@ export default {
         return "0.00%";
       }
       // if(row.)
+    },
+    changeDate(date) {
+      return formatDate(date, 4)
+    },
+    // 导出表格
+    onExportExcel() {
+      const name = this.efunChannelList.filter((item) => item.code === this.efunParams.channel)[0].name
+      downTable('table', [
+          {wch: 15}, // "characters"
+          {wch: 6},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 6},
+          {wch: 15},
+          {wch: 15},
+          {wch: 10},
+          {wch: 10},
+          {wch: 25},
+          {wch: 10},
+          {wch: 10},
+          {wch: 10},
+          {wch: 25}
+        ], name)
     }
   }
 };

src/pages/order/Order.vue

@@ -35,12 +35,16 @@
             <el-date-picker style="width:140px" v-model="orderParams.startDate" type="date" placeholder="起"></el-date-picker>
             <el-date-picker style="width:140px" v-model="orderParams.endDate" type="date" placeholder="止"></el-date-picker>
           </div>
+          <el-button type="primary" @click="search">搜索</el-button>
         </div>
-
-        <el-button type="primary" style="float: right;" @click="search">搜索</el-button>
+        <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
       </div>
-      <el-table :data="orderList" border style="width: 100%" :height="tableHeight">
-        <el-table-column label="日期" fixed prop="day" align="left" header-align="center" min-width="120px"></el-table-column>
+      <el-table id="table" :data="orderList" border style="width: 100%" :height="tableHeight">
+        <el-table-column label="日期" fixed prop="day" align="left" header-align="center" min-width="140px">
+            <template slot-scope="scope">
+                <span>{{changeDate(scope.row.day)}}</span>
+            </template>
+        </el-table-column>
         <el-table-column label="流量与观看" header-align="center">
           <!-- <el-table-column label="产品包名称" prop="packageTitle" align="left" header-align="center"></el-table-column> -->
           <el-table-column
@@ -208,6 +212,7 @@
 <script>
 import { mapGetters } from "vuex";
 import formatDate from "../../utils/formatTime";
+import downTable from '@/utils/downTable'
 export default {
   data() {
     return {
@@ -327,7 +332,36 @@ export default {
     getYesterDay() {
       let yesterday = new Date().getTime() - 86400000;
       return formatDate(yesterday, 2);
-    }
+    },
+    changeDate(date) {
+      return formatDate(date, 4)
+    },
+    // 导出表格
+    onExportExcel() {
+        const name = this.channeList.list.filter((item) => item.code === this.orderParams.channelCode)[0].title
+        const list = this.productList.filter((item) => item.id === this.orderParams.packageId)[0]
+        const productName = list && list.title ? '-' + list.title : ''
+        downTable('table', [
+          {wch: 15}, // "characters"
+          {wch: 6},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 6},
+          {wch: 15},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 10},
+          {wch: 10},
+          {wch: 25},
+          {wch: 10},
+          {wch: 10},
+          {wch: 10},
+          {wch: 20},
+          {wch: 25}
+        ], name + productName)
+    },
   }
 };
 </script>

src/pages/skill/Skill.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm">
+      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
         <div class="leftForm-skill">
           <el-form-item
             style="display:flex;"
@@ -77,15 +77,19 @@
           <el-button type="primary" @click="submitForm('skillParams')">搜索</el-button>
         </el-form-item>
       </el-form>
-      <el-table :data="skillData" border style="width: 100%" :height="tableHeight" v-if="skillParams.channel === 'XYYF'" >
+      <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
+      <el-table id="table" :data="skillData" border style="width: 100%" :height="tableHeight" v-if="skillParams.channel === 'XYYF'" >
         <el-table-column
           label="日期"
-          prop="day"
           fixed
           align="left"
           header-align="center"
-          min-width="120px"
-        ></el-table-column>
+          min-width="140px"
+        >
+            <template slot-scope="scope">
+                <span>{{changeDate(scope.row.day)}}</span>
+            </template>
+        </el-table-column>
         <el-table-column label="流量与观看" header-align="center">
           <el-table-column
             label="UV"
@@ -277,15 +281,18 @@
           </el-table-column>
         </el-table-column>
       </el-table>
-      <el-table :data="skillData" border style="width: 100%" :height="tableHeight" v-else>
+      <el-table id="table" :data="skillData" border style="width: 100%" :height="tableHeight" v-else>
         <el-table-column
           label="日期"
-          prop="day"
           fixed
           align="left"
           header-align="center"
-          min-width="120px"
-        ></el-table-column>
+          min-width="140px"
+        >
+            <template slot-scope="scope">
+                <span>{{changeDate(scope.row.day)}}</span>
+            </template>
+        </el-table-column>
         <el-table-column label="流量与观看" header-align="center">
           <el-table-column
             label="UV"
@@ -459,6 +466,7 @@
 import { mapGetters } from "vuex";
 import formatDate from "../../utils/formatTime";
 import {  getBaiduCourseList } from '../../api/skill'
+import downTable from '@/utils/downTable'
 export default {
   data() {
     return {
@@ -582,6 +590,35 @@ export default {
         return false
       }
       return true
+    },
+    changeDate(date) {
+      return formatDate(date, 4)
+    },
+    // 导出表格
+    onExportExcel() {
+        const name = this.skillChanneList.filter((item) => item.code === this.skillParams.channel)[0].title
+        const list = this.skillList.filter((item) => item.skillId === this.skillParams.skillId)[0]
+        const productName = list && list.skillName ? '-' + list.skillName : ''
+        downTable('table', [
+          {wch: 15}, // "characters"
+          {wch: 6},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 6},
+          {wch: 15},
+          {wch: 15},
+          {wch: 18},
+          {wch: 18},
+          {wch: 10},
+          {wch: 15},
+          {wch: 25},
+          {wch: 10},
+          {wch: 10},
+          {wch: 10},
+          {wch: 20},
+          {wch: 25}
+        ], name + productName)
     }
   }
 };

src/pages/tv/TV.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form :model="efunParams" ref="efunParams" class="clearfix topForm">
+      <el-form :model="efunParams" ref="efunParams" class="clearfix topForm" style="float: left">
         <div class="leftForm-skill">
           <el-form-item
             style="display:flex;"
@@ -23,7 +23,6 @@
               ></el-option>
             </el-select>
           </el-form-item>
-
           <el-form-item class="dateForm-skill" name="data" label="查询日期" style="display:flex">
             <el-date-picker
               style="width:140px"
@@ -43,15 +42,19 @@
           <el-button type="primary" @click="submitForm('efunParams')">搜索</el-button>
         </el-form-item>
       </el-form>
-      <el-table :data="channelData" border style="width: 100%" :height="tableHeight">
+      <el-button type="primary" @click="onExportExcel" style="float: right">导出</el-button>
+      <el-table id="table" :data="channelData" border style="width: 100%" :height="tableHeight">
         <el-table-column
           label="日期"
-          prop="day"
           fixed
           align="left"
           header-align="center"
-          min-width="120px"
-        ></el-table-column>
+          min-width="140px"
+        >
+            <template slot-scope="scope">
+                <span>{{changeDate(scope.row.day)}}</span>
+            </template>
+        </el-table-column>
         <el-table-column label="流量与观看" header-align="center">
           <el-table-column
             label="UV"
@@ -190,6 +193,7 @@
 <script>
 import { mapGetters } from "vuex";
 import formatDate from "../../utils/formatTime";
+import downTable from '@/utils/downTable'
 export default {
   data() {
     return {
@@ -265,6 +269,30 @@ export default {
         return "0.00%";
       }
       // if(row.)
+    },
+        changeDate(date) {
+      return formatDate(date, 4)
+    },
+    // 导出表格
+    onExportExcel() {
+      const name = this.efunChannelList.filter((item) => item.code === this.efunParams.channel)[0].name
+        downTable('table', [
+          {wch: 15}, // "characters"
+          {wch: 6},
+          {wch: 15},
+          {wch: 20},
+          {wch: 20},
+          {wch: 6},
+          {wch: 15},
+          {wch: 15},
+          {wch: 10},
+          {wch: 10},
+          {wch: 25},
+          {wch: 10},
+          {wch: 10},
+          {wch: 10},
+          {wch: 25}
+        ], name)
     }
   }
 };

src/utils/downTable.js

@@ -0,0 +1,53 @@
+import FileSaver from 'file-saver'
+import XLSX from 'xlsx'
+import { Message, MessageBox } from 'element-ui'
+// 导出表格
+/**
+ * @param { String } id  表格id
+ * @param { Array } width 配置生成文件表格所占的字符也就是表格每一行的宽度
+ * @param { String } name 生成文件名字
+ */
+ const downTable = (id, width, name) => {
+    name = name + '.xlsx' || 'test.xlsx'
+    console.log(document.getElementById(id))
+    const excel = exportExcel(document.getElementById(id), width, name)
+    if (excel) {
+        Message({
+          message: '导出成功',
+          type: 'success',
+          duration: 3 * 1000
+        })
+    }
+}
+   /**
+  * 导出表格为excel格式
+  * @param { DOM } ele            // document.getElementById('table')
+  * @param { string } fileName    // test.xlsx
+  */
+  function exportExcel(ele, wscols, fileName) {
+      var fix = document.querySelector('.el-table__fixed');
+      /* 从表生成工作簿对象 */
+      let wb;
+      if (fix) {
+        wb = XLSX.utils.table_to_book(ele.removeChild(fix));
+        ele.appendChild(fix);
+      } else {
+        wb = XLSX.utils.table_to_book(ele);
+      }
+      wb.Sheets.Sheet1['!cols'] = wscols;
+      /* 获取二进制字符串作为输出 */
+      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array', cellDates: true })
+      try {
+
+          // Blob 对象表示一个不可变、原始数据的类文件对象。
+          // Blob 表示的不一定是JavaScript原生格式的数据。
+          // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
+          // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
+          // 设置导出文件名称
+          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)
+      } catch (e) {
+          if (typeof console !== 'undefined') console.log(e, wbout) 
+      }
+      return wbout
+  }
+  export default downTable