Merge pull request #69 from qlik-oss/DEB-242/ExportInContainer

Excel export inside container

src/excel-export.js

@@ -7,13 +7,12 @@ function cleanupNodes (node) {
   });
 }
 
-function buildTableHTML (id, title, subtitle, footnote) {
+function buildTableHTML (containerElement, title, subtitle, footnote) {
   const titleHTML = `<p style="font-size:15pt"><b>${title}</b></p>`;
   const subtitleHTML = `<p style="font-size:11pt">${subtitle}</p>`;
   const footnoteHTML = `<p style="font-size:11pt">${footnote}</p>`;
-  const container = document.querySelector(`[tid="${id}"]`);
-  const kpiTableClone = container.querySelector('.kpi-table').cloneNode(true);
-  const dataTableClone = container.querySelector('.data-table').cloneNode(true);
+  const kpiTableClone = containerElement[0].querySelector('.kpi-table').cloneNode(true);
+  const dataTableClone = containerElement[0].querySelector('.data-table').cloneNode(true);
   cleanupNodes(kpiTableClone);
   cleanupNodes(kpiTableClone);
 
@@ -83,7 +82,7 @@ function buildTableHTML (id, title, subtitle, footnote) {
 
 function downloadXLS (html) {
   const filename = 'analysis.xls';
-  const blobObject = new Blob([html]);
+  const blobObject = new Blob([html], { type: 'application/vnd.ms-excel' });
 
   // IE/Edge
   if (window.navigator.msSaveOrOpenBlob) {
@@ -100,8 +99,8 @@ function downloadXLS (html) {
   return true;
 }
 
-export function exportXLS (id, title, subtitle, footnote) {
+export function exportXLS (containerElement, title, subtitle, footnote) {
   // original was removing icon when starting export, disable and some spinner instead, shouldn't take enough time to warrant either..?
-  const table = buildTableHTML(id, title, subtitle, footnote);
+  const table = buildTableHTML(containerElement, title, subtitle, footnote);
   downloadXLS(table);
 }

src/export-button.jsx

@@ -9,10 +9,10 @@ class ExportButton extends React.PureComponent {
   }
 
   handleExport () {
-    const { id, excelExport, general } = this.props;
+    const { component, excelExport, general } = this.props;
     const { title, subtitle, footnote } = general;
     if (excelExport) {
-      exportXLS(id, title, subtitle, footnote);
+      exportXLS(component.$element, title, subtitle, footnote);
     }
   }
 
@@ -34,7 +34,7 @@ ExportButton.defaultProps = {
 };
 
 ExportButton.propTypes = {
-  id: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   excelExport: PropTypes.bool,
   general: PropTypes.shape({}).isRequired
 };

src/headers-table/export-column-header.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ExportButton from '../export-button.jsx';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
 
-const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
+const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
   const rowSpan = hasSecondDimension ? 2 : 1;
   const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
@@ -22,7 +22,7 @@ const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, has
       style={style}
     >
       <ExportButton
-        id={id}
+        component={component}
         excelExport={allowExcelExport}
         general={general}
       />
@@ -32,7 +32,7 @@ const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, has
 };
 
 ExportColumnHeader.propTypes = {
-  id: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   allowExcelExport: PropTypes.bool.isRequired,
   baseCSS: PropTypes.shape({}).isRequired,
   general: PropTypes.shape({}).isRequired,

src/headers-table/index.jsx

@@ -28,7 +28,7 @@ const HeadersTable = ({ data, general, component, styling, isKpi }) => {
           <tr>
             {isKpi ?
               <ExportColumnHeader
-                id={component.$scope.layout.qInfo.qId}
+                component={component}
                 allowExcelExport={general.allowExcelExport}
                 baseCSS={baseCSS}
                 general={general}