add table that can export table's value as .xls file
This commit is contained in:
Lison
parent
61329d4654
commit
ded3b2c492
|
|
@ -1 +1,2 @@
|
|||
src/vendors.js
|
||||
src/vendors.js
|
||||
src/libs/table2excel.js
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
var idTmr;
|
||||
function getExplorer () {
|
||||
var explorer = window.navigator.userAgent;
|
||||
if (explorer.indexOf('MSIE') >= 0) {
|
||||
// ie
|
||||
return 'ie';
|
||||
} else if (explorer.indexOf('Firefox') >= 0) {
|
||||
// firefox
|
||||
return 'Firefox';
|
||||
} else if (explorer.indexOf('Chrome') >= 0) {
|
||||
// Chrome
|
||||
return 'Chrome';
|
||||
} else if (explorer.indexOf('Opera') >= 0) {
|
||||
// Opera
|
||||
return 'Opera';
|
||||
} else if (explorer.indexOf('Safari') >= 0) {
|
||||
// Safari
|
||||
return 'Safari';
|
||||
};
|
||||
};
|
||||
function tranform (table, aId, name) {
|
||||
let tableHead = table.$children[0].$el;
|
||||
let tableBody = table.$children[1].$el;
|
||||
let tableInnerHTML = '<thead><tr>';
|
||||
if (table.$children.length !== 1) {
|
||||
let len = tableBody.rows.length;
|
||||
let i = -1;
|
||||
while (i < len) {
|
||||
if (i === -1) {
|
||||
Array.from(tableHead.rows[0].children).forEach((td) => {
|
||||
tableInnerHTML = tableInnerHTML + '<th>' + td.children[0].children[0].innerHTML + '</th>';
|
||||
});
|
||||
tableInnerHTML += '</tr><thead><tbody>';
|
||||
} else {
|
||||
tableInnerHTML += '<tr>';
|
||||
Array.from(tableBody.rows[i].children).forEach((td) => {
|
||||
tableInnerHTML = tableInnerHTML + '<td>' + td.children[0].children[0].innerHTML + '</td>';
|
||||
});
|
||||
tableInnerHTML += '</tr>';
|
||||
}
|
||||
i++;
|
||||
}
|
||||
tableInnerHTML += '</tbody>';
|
||||
}
|
||||
|
||||
if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') {
|
||||
name += '.xls';
|
||||
}
|
||||
|
||||
if (getExplorer() === 'ie') {
|
||||
var curTbl = table;
|
||||
var oXL = new ActiveXObject('Excel.Application');
|
||||
var oWB = oXL.Workbooks.Add();
|
||||
var xlsheet = oWB.Worksheets(1);
|
||||
var sel = document.body.createTextRange();
|
||||
sel.moveToElementText(curTbl);
|
||||
sel.select();
|
||||
sel.execCommand('Copy');
|
||||
xlsheet.Paste();
|
||||
oXL.Visible = true;
|
||||
|
||||
try {
|
||||
var fname = oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (*.xls), *.xls');
|
||||
} catch (e) {
|
||||
print('Nested catch caught ' + e);
|
||||
} finally {
|
||||
oWB.SaveAs(fname);
|
||||
// oWB.Close(savechanges = false);
|
||||
oXL.Quit();
|
||||
oXL = null;
|
||||
idTmr = setInterval(Cleanup(), 1);
|
||||
}
|
||||
} else {
|
||||
tableToExcel(tableInnerHTML, aId, name);
|
||||
}
|
||||
}
|
||||
function Cleanup () {
|
||||
window.clearInterval(idTmr);
|
||||
// CollectGarbage();
|
||||
}
|
||||
let tableToExcel = (function () {
|
||||
let uri = 'data:application/vnd.ms-excel;base64,';
|
||||
let template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>';
|
||||
let base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); };
|
||||
let format = function (s, c) {
|
||||
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
|
||||
};
|
||||
return function (table, aId, name) {
|
||||
let ctx = {worksheet: name || 'Worksheet', table: table};
|
||||
document.getElementById(aId).href = uri + base64(format(template, ctx));
|
||||
document.getElementById(aId).download = name;
|
||||
document.getElementById(aId).click();
|
||||
};
|
||||
})();
|
||||
|
||||
const table2excel = {};
|
||||
|
||||
table2excel.transform = tranform;
|
||||
|
||||
export default table2excel;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
.single-page-con{
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 70px;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<a id="ExportExcelHiddenComponentForDownload"></a>
|
||||
<Button type="primary" @click="handleExportExcel">下载</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ExportExcel',
|
||||
props: {
|
||||
table: Object
|
||||
},
|
||||
methods: {
|
||||
handleExportExcel () {
|
||||
this.$emit('exportExcel');
|
||||
// transform(this.table);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
export const table2excelData = [
|
||||
{
|
||||
'name': '推广名称1',
|
||||
'fav': 0,
|
||||
'show': 7302,
|
||||
'weak': 5627,
|
||||
'signin': 1563,
|
||||
'click': 4254,
|
||||
'active': 1438,
|
||||
'day7': 274,
|
||||
'day30': 285,
|
||||
'tomorrow': 1727,
|
||||
'day': 558,
|
||||
'week': 4440,
|
||||
'month': 5610
|
||||
},
|
||||
{
|
||||
'name': '推广名称2',
|
||||
'fav': 0,
|
||||
'show': 4720,
|
||||
'weak': 4086,
|
||||
'signin': 3792,
|
||||
'click': 8690,
|
||||
'active': 8470,
|
||||
'day7': 8172,
|
||||
'day30': 5197,
|
||||
'tomorrow': 1684,
|
||||
'day': 2593,
|
||||
'week': 2507,
|
||||
'month': 1537
|
||||
},
|
||||
{
|
||||
'name': '推广名称3',
|
||||
'fav': 0,
|
||||
'show': 7181,
|
||||
'weak': 8007,
|
||||
'signin': 8477,
|
||||
'click': 1879,
|
||||
'active': 16,
|
||||
'day7': 2249,
|
||||
'day30': 3450,
|
||||
'tomorrow': 377,
|
||||
'day': 1561,
|
||||
'week': 3219,
|
||||
'month': 1588
|
||||
},
|
||||
{
|
||||
'name': '推广名称4',
|
||||
'fav': 0,
|
||||
'show': 9911,
|
||||
'weak': 8976,
|
||||
'signin': 8807,
|
||||
'click': 8050,
|
||||
'active': 7668,
|
||||
'day7': 1547,
|
||||
'day30': 2357,
|
||||
'tomorrow': 7278,
|
||||
'day': 5309,
|
||||
'week': 1655,
|
||||
'month': 9043
|
||||
},
|
||||
{
|
||||
'name': '推广名称5',
|
||||
'fav': 0,
|
||||
'show': 934,
|
||||
'weak': 1394,
|
||||
'signin': 6463,
|
||||
'click': 5278,
|
||||
'active': 9256,
|
||||
'day7': 209,
|
||||
'day30': 3563,
|
||||
'tomorrow': 8285,
|
||||
'day': 1230,
|
||||
'week': 4840,
|
||||
'month': 9908
|
||||
},
|
||||
{
|
||||
'name': '推广名称6',
|
||||
'fav': 0,
|
||||
'show': 6856,
|
||||
'weak': 1608,
|
||||
'signin': 457,
|
||||
'click': 4949,
|
||||
'active': 2909,
|
||||
'day7': 4525,
|
||||
'day30': 6171,
|
||||
'tomorrow': 1920,
|
||||
'day': 1966,
|
||||
'week': 904,
|
||||
'month': 6851
|
||||
},
|
||||
{
|
||||
'name': '推广名称7',
|
||||
'fav': 0,
|
||||
'show': 5107,
|
||||
'weak': 6407,
|
||||
'signin': 4166,
|
||||
'click': 7970,
|
||||
'active': 1002,
|
||||
'day7': 8701,
|
||||
'day30': 9040,
|
||||
'tomorrow': 7632,
|
||||
'day': 4061,
|
||||
'week': 4359,
|
||||
'month': 3676
|
||||
},
|
||||
{
|
||||
'name': '推广名称8',
|
||||
'fav': 0,
|
||||
'show': 5107,
|
||||
'weak': 6407,
|
||||
'signin': 4166,
|
||||
'click': 7970,
|
||||
'active': 1002,
|
||||
'day7': 8701,
|
||||
'day30': 9040,
|
||||
'tomorrow': 7632,
|
||||
'day': 4061,
|
||||
'week': 4359,
|
||||
'month': 3676
|
||||
},
|
||||
{
|
||||
'name': '推广名称9',
|
||||
'fav': 0,
|
||||
'show': 5107,
|
||||
'weak': 6407,
|
||||
'signin': 4166,
|
||||
'click': 7970,
|
||||
'active': 1002,
|
||||
'day7': 8701,
|
||||
'day30': 9040,
|
||||
'tomorrow': 7632,
|
||||
'day': 4061,
|
||||
'week': 4359,
|
||||
'month': 3676
|
||||
},
|
||||
{
|
||||
'name': '推广名称10',
|
||||
'fav': 0,
|
||||
'show': 5107,
|
||||
'weak': 6407,
|
||||
'signin': 4166,
|
||||
'click': 7970,
|
||||
'active': 1002,
|
||||
'day7': 8701,
|
||||
'day30': 9040,
|
||||
'tomorrow': 7632,
|
||||
'day': 4061,
|
||||
'week': 4359,
|
||||
'month': 3676
|
||||
}
|
||||
];
|
||||
|
||||
export const excelColumns = [
|
||||
{
|
||||
'title': '名称',
|
||||
'key': 'name'
|
||||
},
|
||||
{
|
||||
'title': '展示',
|
||||
'key': 'show',
|
||||
'sortable': true,
|
||||
filters: [
|
||||
{
|
||||
label: '大于4000',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '小于4000',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.show > 4000;
|
||||
} else if (value === 2) {
|
||||
return row.show < 4000;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
'title': '唤醒',
|
||||
'key': 'weak',
|
||||
'sortable': true
|
||||
},
|
||||
{
|
||||
'title': '登录',
|
||||
'key': 'signin',
|
||||
'sortable': true
|
||||
},
|
||||
{
|
||||
'title': '点击',
|
||||
'key': 'click',
|
||||
'sortable': true
|
||||
},
|
||||
{
|
||||
'title': '激活',
|
||||
'key': 'active',
|
||||
'sortable': true
|
||||
},
|
||||
{
|
||||
'title': '30日留存',
|
||||
'key': 'day30',
|
||||
'sortable': true
|
||||
},
|
||||
{
|
||||
'title': '月活跃',
|
||||
'key': 'month',
|
||||
'sortable': true
|
||||
}
|
||||
];
|
||||
|
|
@ -43,16 +43,43 @@
|
|||
</Row>
|
||||
</Card>
|
||||
</Row>
|
||||
<Row class="margin-top-10">
|
||||
<Card>
|
||||
<h4 slot="title">
|
||||
<Icon type="android-archive"></Icon>
|
||||
导出表格数据到 .Xls 文件 (Excel)
|
||||
</h4>
|
||||
<Row>
|
||||
<Col span="18">
|
||||
<Table :columns="excelColumns" height="390px" :data="table2excelData" size="small" ref="tableExcel"></Table>
|
||||
</Col>
|
||||
<Col span='6' class="padding-left-10">
|
||||
<div class="margin-top-10 margin-left-10">
|
||||
<span>输入文件名：</span>
|
||||
<Input v-model="excelFileName" icon="document" placeholder="请输入文件名" style="width: 190px" />
|
||||
</div>
|
||||
<div class="margin-left-10 margin-top-20">
|
||||
<a id="hrefToExportTable" style="postion: absolute;left: -10px;top: -10px;width: 0px;height: 0px;"></a>
|
||||
<Button type="primary" size="large" @click="exportExcel">下载表格数据</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {table2csvData, csvColumns} from './data/table2csv.js';
|
||||
import {table2excelData, excelColumns} from './data/table2excel.js';
|
||||
import table2excel from '@/libs/table2excel.js';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columnsCsv: csvColumns,
|
||||
csvData: table2csvData,
|
||||
table2excelData: table2excelData,
|
||||
excelColumns: excelColumns,
|
||||
rowNum: table2csvData.length,
|
||||
colNum: csvColumns.length,
|
||||
selectMinRow: 1,
|
||||
|
|
@ -63,7 +90,10 @@ export default {
|
|||
minRow: 1,
|
||||
maxCol: 0,
|
||||
minCol: 1,
|
||||
csvFileName: ''
|
||||
csvFileName: '',
|
||||
excelFileName: '',
|
||||
tableExcel: {},
|
||||
fontSize: 16
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -84,6 +114,9 @@ export default {
|
|||
data: this.csvData.filter((data, index) => index >= this.selectMinRow - 1 && index <= this.selectMaxRow - 1)
|
||||
});
|
||||
}
|
||||
},
|
||||
exportExcel () {
|
||||
table2excel.transform(this.$refs.tableExcel, 'hrefToExportTable', this.excelFileName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue