feature[Excel]: support export merged header export (#1718)

PanJiaChen · Mar 17, 2019 · 763b31d · 763b31d
1 parent c963f56
commit 763b31d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
@@ -145,20 +145,34 @@ export function export_table_to_excel(id) {
 }
 
 export function export_json_to_excel({
+  multiHeader,
   header,
   data,
   filename,
+  merges,
   autoWidth = true,
   bookType=  'xlsx'
 } = {}) {
   /* original data */
   filename = filename || 'excel-list'
   data = [...data]
   data.unshift(header);
+
+  for (let header of multiHeader) {
+    data.unshift(header)
+  }
+
   var ws_name = "SheetJS";
   var wb = new Workbook(),
     ws = sheet_from_array_of_arrays(data);
 
+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach(item => {
+      ws['!merges'].push(XLSX.utils.decode_range(item))
+    })
+  }
+
   if (autoWidth) {
     /*设置worksheet每列的最大宽度*/
     const colWidth = data.map(row => row.map(val => {

diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
@@ -18,20 +18,22 @@
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
+      <el-table-column label="主要信息" align="center">
+        <el-table-column label="Title">
+          <template slot-scope="scope">
+            {{ scope.row.title }}
+          </template>
+        </el-table-column>
+        <el-table-column label="Author" width="110" align="center">
+          <template slot-scope="scope">
+            <el-tag>{{ scope.row.author }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="Readings" width="115" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.pageviews }}
+          </template>
+        </el-table-column>
       </el-table-column>
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
@@ -79,13 +81,17 @@ export default {
     handleDownload() {
       this.downloadLoading = true
       import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
+        const multiHeader = [['Id', '主要信息', '', '', 'Date']]
+        const tHeader = ['', 'Title', 'Author', 'Readings', '']
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
+        const merges = ['A1:A2', 'B1:D1', 'E1:E2']
         excel.export_json_to_excel({
+          multiHeader,
           header: tHeader,
           data,
+          merges,
           filename: this.filename,
           autoWidth: this.autoWidth,
           bookType: this.bookType