Excel Export

This page demonstrates how HTML content can be exported to excel without losing the formatting.
First the content of the demo report is copied into an APEX item and made suitable for Excel import. This is done using custom JavaScript (see JavaScript tab).
Then the page is submitted with the request EXPORT_EXCEL and upon load the content of the APEX item containing the HTML is downloaded as a file.

More information in this blogpost

Subheader	Empno	Ename	Job	Mgr	Hiredate	Comm
department 10 - ACCOUNTING	7782	CLARK	MANAGER	7839	09-06-81
department 10 - ACCOUNTING	7839	KING	PRESIDENT		17-11-81
department 10 - ACCOUNTING	7934	MILLER	CLERK	7782	23-01-82
department 20 - RESEARCH	7876	ADAMS	CLERK	7788	12-01-83
department 20 - RESEARCH	7902	FORD	ANALYST	7566	03-12-81
department 20 - RESEARCH	7566	JONES	MANAGER	7839	02-04-81
department 20 - RESEARCH	7788	SCOTT	ANALYST	7566	09-12-82
department 20 - RESEARCH	7369	SMITH23	CLERK	7902	17-12-80
department 30 - SALES1	7499	ALLEN	SALESMAN	7698	20-02-81	300
department 30 - SALES1	7698	BLAKE	MANAGER	7839	01-05-81
department 30 - SALES1	7900	JAMES	CLERK	7698	03-12-81
department 30 - SALES1	7654	MARTIN	SALESMAN	7698	28-09-81	1400
department 30 - SALES1	7844	TURNER	SALESMAN	7698	08-09-81	0
department 30 - SALES1	7521	WARD	SALESMAN	7698	22-02-81	500

1 - 14

Content

Before Header Process

Javascript of Dynamic Action to generate report

Branch

Process point	After processing
Sequence	-1
Target > Target	850
Targte > Advanced > Request	EXPORT_EXCEL
Condition > Type	Request = Value
Condition > Value	EXPORT_EXCEL

Page Level JavaScript

// remove the given class from all elements within the table
function remove_class(table,p_class)
{
    $(table).find('.'+p_class).each( function() { $(this).removeClass(p_class);})

}

// convert input element in table cells to plain text
function input2text(selector)
{
    $(selector).find('input').each(
        function() {
            var td    = $(this).closest('td');
            var value = $(this).val();            
            $(td).text(value);
        }
    );
}

// define the styles for your Excel cells here
function get_style() {
    return(`.subheader {background-color: #B0B0B0; }
    `);
}

// copy the table, convert elements and apply styling
function get_content() {
    var table = $('#emp_report .t-Report-report').clone();

// remove standard report table cell classes
    remove_class(table,'t-Report-cell');
    remove_class(table,'t-Report-colHead');
    
    // convert input elements to plain text
    input2text(table);
    
    // apply class hidden to subheader column to hide it
    $(table).find('#SUBHEADER,[headers="SUBHEADER"]').remove();
    
    // apply a colspan of 7 to the subheaders
    $(table).find('.subheader').each( function() { $(this).attr('colspan','7') });
    
    // wrap the table into a html/head structure with style definitions
    var content = `<html><head><style>${get_style()}</style><head><body>${$(table)[0].outerHTML}</body></html>`

// copy the content to the APEX item P850_CONTENT
    apex.item('P850_CONTENT').setValue( content);
}

Export formatted content to Excel without printing engine

Info

Demo Report

HTML content

APEX objects

Before Header Process

Javascript of Dynamic Action to generate report

Branch

JavaScript

Page Level JavaScript