From ece0cc03679ccb6a67869280a58e02c342a69a61 Mon Sep 17 00:00:00 2001 From: ciuliene <47216590+ciuliene@users.noreply.github.com> Date: Thu, 7 Jan 2021 10:09:31 +0100 Subject: [PATCH 1/3] Add files via upload Added autoDownload prop. When the component is mounted, the file is downloaded without using a button (none rendered components) --- ReactHTMLTableToExcel.jsx | 120 ++++++++++++++++++++++++++++++++++++++ index.js | 12 +++- 2 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 ReactHTMLTableToExcel.jsx diff --git a/ReactHTMLTableToExcel.jsx b/ReactHTMLTableToExcel.jsx new file mode 100644 index 0000000..cd6545a --- /dev/null +++ b/ReactHTMLTableToExcel.jsx @@ -0,0 +1,120 @@ +/* global window, document, Blob */ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +const propTypes = { + table: PropTypes.string.isRequired, + filename: PropTypes.string.isRequired, + sheet: PropTypes.string.isRequired, + id: PropTypes.string, + className: PropTypes.string, + buttonText: PropTypes.string, + autoDownload: PropTypes.bool, +}; + +const defaultProps = { + id: 'button-download-as-xls', + className: 'button-download', + buttonText: 'Download', + autoDownload: false, +}; + +class ReactHTMLTableToExcel extends Component { + constructor(props) { + super(props); + this.handleDownload = this.handleDownload.bind(this); + } + + componentDidMount() { + if (this.props.autoDownload) this.handleDownload(); + } + + static base64(s) { + return window.btoa(unescape(encodeURIComponent(s))); + } + + static format(s, c) { + return s.replace(/{(\w+)}/g, (m, p) => c[p]); + } + + handleDownload() { + if (!document) { + if (process.env.NODE_ENV !== 'production') { + console.error('Failed to access document object'); + } + + return null; + } + + if (document.getElementById(this.props.table).nodeType !== 1 || document.getElementById(this.props.table).nodeName !== 'TABLE') { + if (process.env.NODE_ENV !== 'production') { + console.error('Provided table property is not html table element'); + } + + return null; + } + + const table = document.getElementById(this.props.table).outerHTML; + const sheet = String(this.props.sheet); + const filename = `${String(this.props.filename)}.xls`; + + const uri = 'data:application/vnd.ms-excel;base64,'; + const template = + '{table}'; + + const context = { + worksheet: sheet || 'Worksheet', + table, + }; + + // If IE11 + if (window.navigator.msSaveOrOpenBlob) { + const fileData = [ + `${''}${table}`, + ]; + const blobObject = new Blob(fileData); + document.getElementById('react-html-table-to-excel').click()(() => { + window.navigator.msSaveOrOpenBlob(blobObject, filename); + }); + + return true; + } + + const element = window.document.createElement('a'); + element.href = + uri + + ReactHTMLTableToExcel.base64( + ReactHTMLTableToExcel.format(template, context), + ); + element.download = filename; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + + return true; + } + + render() { + if (this.props.autoDownload) return null; + return ( + + ); + } +} + +ReactHTMLTableToExcel.propTypes = propTypes; +ReactHTMLTableToExcel.defaultProps = defaultProps; + +export default ReactHTMLTableToExcel; diff --git a/index.js b/index.js index 27bb0f1..15efc89 100644 --- a/index.js +++ b/index.js @@ -29,13 +29,15 @@ var propTypes = { sheet: _propTypes2.default.string.isRequired, id: _propTypes2.default.string, className: _propTypes2.default.string, - buttonText: _propTypes2.default.string + buttonText: _propTypes2.default.string, + autoDownload: _propTypes2.default.bool }; var defaultProps = { id: 'button-download-as-xls', className: 'button-download', - buttonText: 'Download' + buttonText: 'Download', + autoDownload: false }; var ReactHTMLTableToExcel = function (_Component) { @@ -51,6 +53,11 @@ var ReactHTMLTableToExcel = function (_Component) { } _createClass(ReactHTMLTableToExcel, [{ + key: 'componentDidMount', + value: function componentDidMount() { + if (this.props.autoDownload) this.handleDownload(); + } + }, { key: 'handleDownload', value: function handleDownload() { if (!document) { @@ -104,6 +111,7 @@ var ReactHTMLTableToExcel = function (_Component) { }, { key: 'render', value: function render() { + if (this.props.autoDownload) return null; return _react2.default.createElement( 'button', { From 5e4291ef3c4f068f398f59ecb4375e97eb9bd401 Mon Sep 17 00:00:00 2001 From: ciuliene <47216590+ciuliene@users.noreply.github.com> Date: Thu, 7 Jan 2021 10:44:49 +0100 Subject: [PATCH 2/3] Update ReactHTMLTableToExcel.jsx Fixed component for auto download --- src/ReactHTMLTableToExcel.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx index fd32011..cd6545a 100644 --- a/src/ReactHTMLTableToExcel.jsx +++ b/src/ReactHTMLTableToExcel.jsx @@ -9,12 +9,14 @@ const propTypes = { id: PropTypes.string, className: PropTypes.string, buttonText: PropTypes.string, + autoDownload: PropTypes.bool, }; const defaultProps = { id: 'button-download-as-xls', className: 'button-download', buttonText: 'Download', + autoDownload: false, }; class ReactHTMLTableToExcel extends Component { @@ -23,6 +25,10 @@ class ReactHTMLTableToExcel extends Component { this.handleDownload = this.handleDownload.bind(this); } + componentDidMount() { + if (this.props.autoDownload) this.handleDownload(); + } + static base64(s) { return window.btoa(unescape(encodeURIComponent(s))); } @@ -94,6 +100,7 @@ class ReactHTMLTableToExcel extends Component { } render() { + if (this.props.autoDownload) return null; return ( - ); - } -} - -ReactHTMLTableToExcel.propTypes = propTypes; -ReactHTMLTableToExcel.defaultProps = defaultProps; - -export default ReactHTMLTableToExcel;