zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
小新 2019-03-17 16:36:09 +08:00 committed by Pan
parent b44335f012
commit 3d973f7ddd
2 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/vendor/Export2Excel.js vendored
View File

@ -145,9 +145,11 @@ export function export_table_to_excel(id) {
} }
export function export_json_to_excel({ export function export_json_to_excel({
multiHeader,
header, header,
data, data,
filename, filename,
merges,
autoWidth = true, autoWidth = true,
bookType= 'xlsx' bookType= 'xlsx'
} = {}) { } = {}) {
@ -155,10 +157,22 @@ export function export_json_to_excel({
filename = filename || 'excel-list' filename = filename || 'excel-list'
data = [...data] data = [...data]
data.unshift(header); data.unshift(header);
for (let header of multiHeader) {
data.unshift(header)
}
var ws_name = "SheetJS"; var ws_name = "SheetJS";
var wb = new Workbook(), var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data); 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) { if (autoWidth) {
/*设置worksheet每列的最大宽度*/ /*设置worksheet每列的最大宽度*/
const colWidth = data.map(row => row.map(val => { const colWidth = data.map(row => row.map(val => {

36
src/views/excel/exportExcel.vue
View File

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