csv export

1 files changed, 28 insertions, 1 deletions

diff --git a/client/table/citations.table.js b/client/table/citations.table.js
index 0092015f..bbc55047 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { ReactTabulator } from 'react-tabulator'
+import { saveAs } from 'file-saver'
 
 import { Loader } from '../common'
 import { toArray, toTuples, domainFromUrl } from '../util'
@@ -71,6 +72,32 @@ class CitationsTable extends Component {
     }
   }
 
+  download() {
+    const { formattedCitations } = this.state
+    const fn = this.props.payload.data.paper.key + '.csv'
+    const titles = citationsColumns.map(c => c.title)
+    const fields = citationsColumns.map(c => c.formatterParams ? c.formatterParams.urlField : c.field)
+    const rows = formattedCitations.map(citation => {
+      const row = fields.map(field => citation[field]).map(data => {
+        switch (typeof data) {
+          case 'number':
+            return String(data)
+          default:
+            return '\"' + String(data) + '\"'
+        }
+      })
+      return row.join(",")
+    })
+
+    const blob = new Blob([
+      [
+        titles.join(','),
+        ...rows,
+      ].join('\n')
+    ], {type: "text/csv;charset=utf-8"});
+    saveAs(blob, fn);
+  }
+
   render() {
     const { formattedCitations, filteredCitations } = this.state
     if (!formattedCitations.length) return <Loader />
@@ -84,7 +111,7 @@ class CitationsTable extends Component {
             className='q'
             placeholder='Enter text to search citations...'
           />
-          <a href=
+          <span className='download' onClick={() => this.download()}>Download CSV</span>
         </div>
         <ReactTabulator
           columns={citationsColumns}