Table support export .csv file
Table support export .csv file
This commit is contained in:
梁灏
parent
2f0b086d60
commit
43509ad876
5 changed files with 304 additions and 36 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "0.9.10-rc-2",
|
||||
"version": "0.9.10-rc-3",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
|||
77
src/components/table/export-csv.js
Normal file
77
src/components/table/export-csv.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
function has (browser) {
|
||||
const ua = navigator.userAgent;
|
||||
if (browser === 'ie') {
|
||||
const isIE = ua.indexOf('compatible') > -1 && ua.indexOf('MSIE') > -1;
|
||||
if (isIE) {
|
||||
const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
||||
reIE.test(ua);
|
||||
return parseFloat(RegExp["$1"]);
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return ua.indexOf(browser) > -1;
|
||||
}
|
||||
}
|
||||
|
||||
const csv = {
|
||||
_isIE11 () {
|
||||
let iev = 0;
|
||||
const ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
|
||||
const trident = !!navigator.userAgent.match(/Trident\/7.0/);
|
||||
const rv = navigator.userAgent.indexOf("rv:11.0");
|
||||
|
||||
if (ieold) {
|
||||
iev = Number(RegExp.$1);
|
||||
}
|
||||
if (navigator.appVersion.indexOf("MSIE 10") !== -1) {
|
||||
iev = 10;
|
||||
}
|
||||
if (trident && rv !== -1) {
|
||||
iev = 11;
|
||||
}
|
||||
|
||||
return iev === 11;
|
||||
},
|
||||
|
||||
_isEdge () {
|
||||
return /Edge/.test(navigator.userAgent);
|
||||
},
|
||||
|
||||
_getDownloadUrl (text) {
|
||||
const BOM = "\uFEFF";
|
||||
// Add BOM to text for open in excel correctly
|
||||
if (window.Blob && window.URL && window.URL.createObjectURL && !has('Safari')) {
|
||||
const csvData = new Blob([BOM + text], { type: 'text/csv' });
|
||||
return URL.createObjectURL(csvData);
|
||||
} else {
|
||||
return 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
|
||||
}
|
||||
},
|
||||
|
||||
download (filename, text) {
|
||||
if (has('ie') && has('ie') < 10) {
|
||||
// has module unable identify ie11 and Edge
|
||||
const oWin = window.top.open("about:blank", "_blank");
|
||||
oWin.document.charset = 'utf-8';
|
||||
oWin.document.write(text);
|
||||
oWin.document.close();
|
||||
oWin.document.execCommand('SaveAs', filename);
|
||||
oWin.close();
|
||||
} else if (has("ie") === 10 || this._isIE11() || this._isEdge()) {
|
||||
const BOM = "\uFEFF";
|
||||
const csvData = new Blob([BOM + text], { type: 'text/csv' });
|
||||
navigator.msSaveBlob(csvData, filename);
|
||||
} else {
|
||||
const link = document.createElement('a');
|
||||
link.download = filename;
|
||||
link.href = this._getDownloadUrl(text);
|
||||
link.target = '_blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default csv;
|
||||
|
|
@ -73,6 +73,8 @@
|
|||
import tableHead from './table-head.vue';
|
||||
import tableBody from './table-body.vue';
|
||||
import { oneOf, getStyle, deepCopy } from '../../utils/assist';
|
||||
import Csv from '../../utils/csv';
|
||||
import ExportCsv from './export-csv';
|
||||
const prefixCls = 'ivu-table';
|
||||
|
||||
export default {
|
||||
|
|
@ -516,6 +518,32 @@
|
|||
}
|
||||
});
|
||||
return left.concat(center).concat(right);
|
||||
},
|
||||
exportCsv (params) {
|
||||
if (params.filename) {
|
||||
if (params.filename.indexOf('.csv') === -1) {
|
||||
params.filename += '.csv';
|
||||
}
|
||||
} else {
|
||||
params.filename = 'table.csv';
|
||||
}
|
||||
|
||||
let columns = [];
|
||||
let datas = [];
|
||||
if (params.columns && params.data) {
|
||||
columns = params.columns;
|
||||
datas = params.data;
|
||||
} else {
|
||||
columns = this.columns;
|
||||
if (!('original' in params)) params.original = true;
|
||||
datas = params.original ? this.data : this.rebuildData;
|
||||
}
|
||||
|
||||
let noHeader = false;
|
||||
if ('noHeader' in params) noHeader = params.noHeader;
|
||||
|
||||
const data = Csv(columns, datas, ',', noHeader);
|
||||
ExportCsv.download(params.filename, data);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
|
|
|
|||
55
src/utils/csv.js
Normal file
55
src/utils/csv.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// https://github.com/Terminux/react-csv-downloader/blob/master/src/lib/csv.js
|
||||
|
||||
const newLine = '\r\n';
|
||||
|
||||
export default function csv(columns, datas, separator = ',', noHeader = false) {
|
||||
let columnOrder;
|
||||
const content = [];
|
||||
const column = [];
|
||||
|
||||
if (columns) {
|
||||
columnOrder = columns.map(v => {
|
||||
if (typeof v === 'string') {
|
||||
return v;
|
||||
}
|
||||
if (!noHeader) {
|
||||
column.push((typeof v.title !== 'undefined') ? v.title : v.key);
|
||||
}
|
||||
return v.key;
|
||||
});
|
||||
if (column.length > 0) {
|
||||
content.push(column.join(separator));
|
||||
}
|
||||
} else {
|
||||
columnOrder = [];
|
||||
datas.forEach(v => {
|
||||
if (!Array.isArray(v)) {
|
||||
columnOrder = columnOrder.concat(Object.keys(v));
|
||||
}
|
||||
});
|
||||
if (columnOrder.length > 0) {
|
||||
columnOrder = columnOrder.filter((value, index, self) => self.indexOf(value) === index);
|
||||
|
||||
if (!noHeader) {
|
||||
content.push(columnOrder.join(separator));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(datas)) {
|
||||
datas.map(v => {
|
||||
if (Array.isArray(v)) {
|
||||
return v;
|
||||
}
|
||||
return columnOrder.map(k => {
|
||||
if (typeof v[k] !== 'undefined') {
|
||||
return v[k];
|
||||
}
|
||||
return '';
|
||||
});
|
||||
}).forEach(v => {
|
||||
content.push(v.join(separator));
|
||||
});
|
||||
}
|
||||
return content.join(newLine);
|
||||
}
|
||||
|
|
@ -1,49 +1,157 @@
|
|||
<template>
|
||||
<i-table :columns="columns1" :data="data1"></i-table>
|
||||
<i-table size="small" :columns="columns1" :data="data1"></i-table>
|
||||
<i-button @click="down">down</i-button>
|
||||
<checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
|
||||
<checkbox value="show">展示</checkbox>
|
||||
<checkbox value="weak">唤醒</checkbox>
|
||||
<checkbox value="signin">登录</checkbox>
|
||||
<checkbox value="click">点击</checkbox>
|
||||
<checkbox value="active">激活</checkbox>
|
||||
<checkbox value="day7">7日留存</checkbox>
|
||||
<checkbox value="day30">30日留存</checkbox>
|
||||
<checkbox value="tomorrow">次日留存</checkbox>
|
||||
<checkbox value="day">日活跃</checkbox>
|
||||
<checkbox value="week">周活跃</checkbox>
|
||||
<checkbox value="month">月活跃</checkbox>
|
||||
</checkbox-group>
|
||||
<i-table :content="self" :data="tableData2" :columns="tableColumns2" border v-ref:table></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns1: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
self: this,
|
||||
tableData2: this.mockTableData2(),
|
||||
tableColumns2: [],
|
||||
tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mockTableData2 () {
|
||||
let data = [];
|
||||
function getNum() {
|
||||
return Math.floor(Math.random () * 10000 + 1);
|
||||
}
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
name: '推广名称' + (i+1),
|
||||
fav: 0,
|
||||
show: getNum(),
|
||||
weak: getNum(),
|
||||
signin: getNum(),
|
||||
click: getNum(),
|
||||
active: getNum(),
|
||||
day7: getNum(),
|
||||
day30: getNum(),
|
||||
tomorrow: getNum(),
|
||||
day: getNum(),
|
||||
week: getNum(),
|
||||
month: getNum()
|
||||
})
|
||||
}
|
||||
return data;
|
||||
},
|
||||
getTable2Columns () {
|
||||
const table2ColumnList = {
|
||||
name: {
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
fixed: 'left',
|
||||
width: 200,
|
||||
render (row, column, index) {
|
||||
return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
|
||||
<Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
|
||||
<span>${row.name}</span>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
show: {
|
||||
title: '展示',
|
||||
key: 'show',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
weak: {
|
||||
title: '唤醒',
|
||||
key: 'weak',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
signin: {
|
||||
title: '登录',
|
||||
key: 'signin',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
click: {
|
||||
title: '点击',
|
||||
key: 'click',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
active: {
|
||||
title: '激活',
|
||||
key: 'active',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
day7: {
|
||||
title: '7日留存',
|
||||
key: 'day7',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
day30: {
|
||||
title: '30日留存',
|
||||
key: 'day30',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
tomorrow: {
|
||||
title: '次日留存',
|
||||
key: 'tomorrow',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
day: {
|
||||
title: '日活跃',
|
||||
key: 'day',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
week: {
|
||||
title: '周活跃',
|
||||
key: 'week',
|
||||
width: 150,
|
||||
sortable: true
|
||||
},
|
||||
month: {
|
||||
title: '月活跃',
|
||||
key: 'month',
|
||||
width: 150,
|
||||
sortable: true
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let data = [table2ColumnList.name];
|
||||
|
||||
this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
|
||||
|
||||
return data;
|
||||
},
|
||||
changeTableColumns () {
|
||||
this.tableColumns2 = this.getTable2Columns();
|
||||
},
|
||||
toggleFav (index) {
|
||||
this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
|
||||
},
|
||||
down () {
|
||||
this.$refs.table.exportCsv({
|
||||
filename: '2132',
|
||||
original: false
|
||||
});
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.changeTableColumns();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue