1+ import React , { Component , PropTypes } from 'react' ;
2+
3+ class ReactHTMLTableToExcel extends Component {
4+
5+ constructor ( props ) {
6+ super ( props ) ;
7+ this . download = this
8+ . download
9+ . bind ( this ) ;
10+ }
11+
12+ base64 ( s ) {
13+ return window . btoa ( unescape ( encodeURIComponent ( s ) ) )
14+ }
15+
16+ format ( s , c ) {
17+ return s . replace ( / { ( \w + ) } / g, function ( m , p ) {
18+ return c [ p ] ;
19+ } )
20+ }
21+
22+ download ( ) {
23+ let table = document
24+ . getElementById ( this . props . table )
25+ . outerHTML ;
26+ let sheet = String ( this . props . sheet ) ;
27+ let filename = String ( this . props . filename ) + '.xls' ;
28+
29+ let uri = 'data:application/vnd.ms-excel;base64,' ;
30+ let template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' +
31+ 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' +
32+ 'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' +
33+ 'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' +
34+ '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' +
35+ 'xml><![endif]--></head><body>{table}</body></html>' ;
36+
37+ let context = {
38+ worksheet : sheet || 'Worksheet' ,
39+ table : table
40+ }
41+
42+ // If IE11
43+ if ( window . navigator . msSaveOrOpenBlob ) {
44+ let fileData = [ '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' +
45+ 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' +
46+ 'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' +
47+ 'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' +
48+ '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' +
49+ 'xml><![endif]--></head><body>' + table + '</body></html>' ] ;
50+ let blobObject = new Blob ( fileData ) ;
51+ let elem = window
52+ . document
53+ . createElement ( 'a' ) ;
54+ document
55+ . getElementById ( 'react-html-table-to-excel' )
56+ . click ( ) ( function ( ) {
57+ window
58+ . navigator
59+ . msSaveOrOpenBlob ( blobObject , filename ) ;
60+ } ) ;
61+
62+ return ;
63+ }
64+
65+ let element = window
66+ . document
67+ . createElement ( 'a' ) ;
68+ element . href = uri + this . base64 ( this . format ( template , context ) ) ;
69+ element . download = filename ;
70+ document
71+ . body
72+ . appendChild ( element ) ;
73+ element . click ( ) ;
74+ document
75+ . body
76+ . removeChild ( element ) ;
77+
78+ return ;
79+ }
80+
81+ render ( ) {
82+ return (
83+ < div >
84+ < button id = "react-html-table-to-excel" type = "button" onClick = { this . download } > { this . props . buttonText || 'Download' } </ button >
85+ </ div >
86+ )
87+ }
88+ }
89+
90+ ReactHTMLTableToExcel . propTypes = {
91+ table : PropTypes . string . isRequired ,
92+ filename : PropTypes . string . isRequired ,
93+ sheet : PropTypes . string . isRequired ,
94+ buttonText : PropTypes . string
95+ } ;
96+
97+ export default ReactHTMLTableToExcel
0 commit comments