Commit fb8479988cfd1db1cfe202bda59d7b6e0924ccef
1 parent
109465d3
Improve export to CSV functionality
- added`callback`option so we can get CSV data in case we do not want
to download
- added options:
- `quoted` for cases when we have line breaks in content
- `separator` for cases when we have commas in content
Showing
2 changed files
with
32 additions
and
27 deletions
Show diff stats
src/components/table/table.vue
| ... | ... | @@ -714,8 +714,9 @@ |
| 714 | 714 | let noHeader = false; |
| 715 | 715 | if ('noHeader' in params) noHeader = params.noHeader; |
| 716 | 716 | |
| 717 | - const data = Csv(columns, datas, ',', noHeader); | |
| 718 | - ExportCsv.download(params.filename, data); | |
| 717 | + const data = Csv(columns, datas, params, noHeader); | |
| 718 | + if (params.callback) params.callback(data); | |
| 719 | + else ExportCsv.download(params.filename, data); | |
| 719 | 720 | } |
| 720 | 721 | }, |
| 721 | 722 | created () { | ... | ... |
src/utils/csv.js
| 1 | -// https://github.com/Terminux/react-csv-downloader/blob/master/src/lib/csv.js | |
| 1 | +/* | |
| 2 | + inspired by https://www.npmjs.com/package/react-csv-downloader | |
| 3 | + now removed from Github | |
| 4 | +*/ | |
| 2 | 5 | |
| 3 | 6 | const newLine = '\r\n'; |
| 7 | +const appendLine = (content, row, { separator, quoted }) => { | |
| 8 | + const line = row.map(data => { | |
| 9 | + if (!quoted) return data; | |
| 10 | + // quote data | |
| 11 | + data = typeof data === 'string' ? data.replace(/"/g, '"') : data; | |
| 12 | + return `"${data}"`; | |
| 13 | + }); | |
| 14 | + content.push(line.join(separator)); | |
| 15 | +}; | |
| 4 | 16 | |
| 5 | -export default function csv(columns, datas, separator = ',', noHeader = false) { | |
| 17 | +const defaults = { | |
| 18 | + separator: ',', | |
| 19 | + quoted: false | |
| 20 | +}; | |
| 21 | + | |
| 22 | +export default function csv(columns, datas, options, noHeader = false) { | |
| 23 | + options = Object.assign({}, defaults, options); | |
| 6 | 24 | let columnOrder; |
| 7 | 25 | const content = []; |
| 8 | 26 | const column = []; |
| 9 | 27 | |
| 10 | 28 | if (columns) { |
| 11 | 29 | columnOrder = columns.map(v => { |
| 12 | - if (typeof v === 'string') { | |
| 13 | - return v; | |
| 14 | - } | |
| 30 | + if (typeof v === 'string') return v; | |
| 15 | 31 | if (!noHeader) { |
| 16 | - column.push((typeof v.title !== 'undefined') ? v.title : v.key); | |
| 32 | + column.push(typeof v.title !== 'undefined' ? v.title : v.key); | |
| 17 | 33 | } |
| 18 | 34 | return v.key; |
| 19 | 35 | }); |
| 20 | - if (column.length > 0) { | |
| 21 | - content.push(column.join(separator)); | |
| 22 | - } | |
| 36 | + if (column.length > 0) appendLine(content, column, options); | |
| 23 | 37 | } else { |
| 24 | 38 | columnOrder = []; |
| 25 | 39 | datas.forEach(v => { |
| ... | ... | @@ -29,27 +43,17 @@ export default function csv(columns, datas, separator = ',', noHeader = false) { |
| 29 | 43 | }); |
| 30 | 44 | if (columnOrder.length > 0) { |
| 31 | 45 | columnOrder = columnOrder.filter((value, index, self) => self.indexOf(value) === index); |
| 32 | - | |
| 33 | - if (!noHeader) { | |
| 34 | - content.push(columnOrder.join(separator)); | |
| 35 | - } | |
| 46 | + if (!noHeader) appendLine(content, columnOrder, options); | |
| 36 | 47 | } |
| 37 | 48 | } |
| 38 | 49 | |
| 39 | 50 | if (Array.isArray(datas)) { |
| 40 | - datas.map(v => { | |
| 41 | - if (Array.isArray(v)) { | |
| 42 | - return v; | |
| 51 | + datas.forEach(row => { | |
| 52 | + if (!Array.isArray(row)) { | |
| 53 | + row = columnOrder.map(k => (typeof row[k] !== 'undefined' ? row[k] : '')); | |
| 43 | 54 | } |
| 44 | - return columnOrder.map(k => { | |
| 45 | - if (typeof v[k] !== 'undefined') { | |
| 46 | - return v[k]; | |
| 47 | - } | |
| 48 | - return ''; | |
| 49 | - }); | |
| 50 | - }).forEach(v => { | |
| 51 | - content.push(v.join(separator)); | |
| 55 | + appendLine(content, row, options); | |
| 52 | 56 | }); |
| 53 | 57 | } |
| 54 | 58 | return content.join(newLine); |
| 55 | -} | |
| 56 | 59 | \ No newline at end of file |
| 60 | +} | ... | ... |