人员报销详情导出代码

.env.development

@@ -5,7 +5,7 @@ ENV = 'development'
 VUE_APP_BASE_API = '/api'
 
 # Jeeplus快速开发平台/后台地址
-VUE_APP_SERVER_URL = 'http://localhost:8084'
+VUE_APP_SERVER_URL = 'http://localhost:8085'
 
 #单点登录设置
 VUE_APP_SSO_LOGIN  = 'false'

package.json

@@ -20,6 +20,7 @@
     "echarts": "^4.5.0",
     "element-ui": "^2.13.0",
     "exceljs": "^4.3.0",
+    "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "jeeplus-filemanager": "^2.0.0",
     "jeeplus-flowable": "^2.1.5",
@@ -57,7 +58,8 @@
     "vxe-table": "^3.4.11",
     "vxe-table-plugin-export-xlsx": "^2.2.2",
     "wangeditor": "^3.1.1",
-    "xe-utils": "^3.4.3"
+    "xe-utils": "^3.4.3",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/runtime": "^7.7.4",

src/views/modules/reimbursementSys/user/reimbursementUserBusinessList.vue

@@ -73,6 +73,7 @@
       <el-form-item>
         <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
         <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+        <el-button @click="exportExcel()" size="small" icon="el-icon-printer">导出</el-button>
         <el-button type="info" size="small" @click="goBack">返回</el-button>
       </el-form-item>
     </el-form>
@@ -99,9 +100,15 @@
             </div>
           </el-col>
           <el-table
+            id="out-table"
             :data="columnForm.columnList"
             style="width: 100%">
             <el-table-column
+              prop="userName"
+              label="报销人"
+            >
+            </el-table-column>
+            <el-table-column
               prop="businessCode"
               label="报销批次"
             >
@@ -170,6 +177,8 @@
 
 <script>
   import ReimbursementUser from '@/api/reimbursementSys/user/reimbursementUserService'
+  import FileSaver from 'file-saver'
+  import * as XLSX from 'xlsx'
 
   export default {
     data () {
@@ -208,6 +217,8 @@
           reimbursementAddress: '',  // 报销来源
           officeType: '',  // 报销来源
           reimbursementFsalary: '',  // 实发类型
+          userName: '',  // 报销人名称
+          year: '',  // 年份
           columnList: []
         },
 
@@ -269,6 +280,8 @@
           this.columnForm.alreadyReimbursementAmount = data.alreadyReimbursementAmount
           this.columnForm.surplusReimbursementAmount = data.surplusReimbursementAmount
           this.columnForm.reimbursementQuotaDay = data.reimbursementQuotaDay
+          this.columnForm.userName = data.userName
+          this.columnForm.year = data.year
         })
       }
     },
@@ -290,6 +303,8 @@
           this.columnForm.alreadyReimbursementAmount = data.alreadyReimbursementAmount
           this.columnForm.surplusReimbursementAmount = data.surplusReimbursementAmount
           this.columnForm.reimbursementQuotaDay = data.reimbursementQuotaDay
+          this.columnForm.userName = data.userName
+          this.columnForm.year = data.year
           this.loading = false
         })
       },
@@ -320,6 +335,35 @@
         } else {
           return '——'
         }
+      },
+      // 定义导出Excel表格事件
+      exportExcel () {
+        var xlsxParam = { raw: true }
+        /* 从表生成工作簿对象 */
+        var wb = XLSX.utils.table_to_book(
+          document.querySelector('#out-table'),
+          xlsxParam
+        )
+        /* 获取二进制字符串作为输出 */
+        var wbout = XLSX.write(wb, {
+          bookType: 'xlsx',
+          bookSST: true,
+          type: 'array'
+        })
+        try {
+          FileSaver.saveAs(
+            // Blob 对象表示一个不可变、原始数据的类文件对象。
+            // Blob 表示的不一定是JavaScript原生格式的数据。
+            // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
+            // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
+            new Blob([wbout], { type: 'application/octet-stream' }),
+            // 设置导出文件名称
+            this.columnForm.userName + this.columnForm.year + '报销详情.xlsx'
+          )
+        } catch (e) {
+          if (typeof console !== 'undefined') console.log(e, wbout)
+        }
+        return wbout
       }
     }
   }