课程表导出

frontend_web/src/views/course/detail/index.vue

@@ -30,11 +30,16 @@
                      icon="el-icon-circle-plus"
                      @click="add"> 新增
           </el-button>
+<!--          <el-button type="primary"-->
+<!--                     size="mini"-->
+<!--                     icon="el-icon-circle-plus"-->
+<!--                     :disabled="deleteBtnVisible"-->
+<!--                     @click="delSelectedIds"> 删除-->
+<!--          </el-button>-->
           <el-button type="primary"
                      size="mini"
-                     icon="el-icon-circle-plus"
-                     :disabled="deleteBtnVisible"
-                     @click="delSelectedIds"> 删除
+                     icon="el-icon-download"
+                     @click="handleDownload"> 导出
           </el-button>
           <el-button type="primary"
                      size="mini"
@@ -52,10 +57,12 @@
               tooltip-effect="dark"
               style="width: 100%"
               @sort-change="orderby"
+              id="out-table"
               height="100%">
       <el-table-column label="操作"
                        width="160px"
                        align="center"
+                       id="operation"
                        fixed='right'>
         <template slot-scope="scope">
           <el-button size="mini"
@@ -74,33 +81,35 @@
 
         </template>
       </el-table-column>
-      <el-table-column prop="CourseName"
-                       align="center"
-                       min-width="120px"
-                       label="课程名称"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="Teacher"
-                       align="center"
-                       min-width="120px"
-                       label="授课老师"
-                       show-overflow-tooltip
-                       :formatter="teacherFormatter"></el-table-column>
-      <el-table-column prop="Local"
-                       align="center"
-                       min-width="120px"
-                       label="实验地点"
-                       show-overflow-tooltip
-                       :formatter="localFormatter"></el-table-column>
-      <el-table-column prop="Num"
-                       align="center"
-                       min-width="120px"
-                       label="人数"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="CreatedTime"
-                       align="center"
-                       min-width="120px"
-                       label="创建时间"
-                       show-overflow-tooltip></el-table-column>
+        <el-table-column prop="CourseName"
+                         align="center"
+                         min-width="120px"
+                         label="课程名称"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="Teacher"
+                         align="center"
+                         min-width="120px"
+                         label="授课老师"
+                         show-overflow-tooltip
+                         :formatter="teacherFormatter">
+        </el-table-column>
+        <el-table-column prop="Local"
+                         align="center"
+                         min-width="120px"
+                         label="实验地点"
+                         show-overflow-tooltip
+                         :formatter="localFormatter"></el-table-column>
+        <el-table-column prop="Num"
+                         align="center"
+                         min-width="120px"
+                         label="人数"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="CreatedTime"
+                         align="center"
+                         min-width="120px"
+                         label="创建时间"
+                         show-overflow-tooltip></el-table-column>
+
     </el-table>
 
     <template slot="footer">
@@ -133,6 +142,8 @@ import editForm from './editForm'
 import { searchmanagingroomdata } from '@/api/instrumentroom'
 import 'ag-grid-community/dist/styles/ag-grid.css'
 import 'ag-grid-community/dist/styles/ag-theme-balham.css'
+import FileSaver from 'file-saver'
+import XLSX from 'xlsx'
 
 export default {
   name: 'courseDetail',
@@ -401,6 +412,17 @@ export default {
       }
       this.Column.Prop = column.prop
       this.initDatas()
+    },
+    // 导出excel
+    handleDownload () {
+      /* out-table关联导出的dom节点  */
+      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
+      /* get binary string as output */
+      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
+      try {
+        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '课程表.xlsx')
+      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
+      return wbout
     }
   }
 }