Excel File Download Blocked by Ext JS

Question

Actually, I would like to Trigger the automatic download of a generated excel file in an Ext JS Page. Is there any example source code which could help? Find Below my personnal source code which is actually not working (this function is called when clicking on the "export csv" button:

function exportCsv($criteresRecherche)
{
    $data = $this->executeRequete($sql);           

    header("Content-type: application/vnd.ms-excel");
    header("Content-disposition: attachment; filename=\"export_commandes.csv\"");


    $colToShow = array(
        "fournisseur"=>"Fournisseur",
        "lieudepart"=>"Départ",
        "datedepartprevue"=> "Date Dep Prevu",
        "confirme"=> "Emb.",
        "modepaiement"=>"Pmt.", 
        "incoterm"=>"Inc.",
        "containers"=>"Containers",
        "nocde"=>"CDE BIE N°",
        "nocde_associees"=>"CDE BIE ASSOC",
        "nocde_erp"=>"N° GNX",
        "aa"=>"Acheteur",
        "acp"=>"Acheteur CP",
        "resp_suivi"=>"Suivi par",
        "shippingmarks"=>"Shp.",
        "artwrk"=>"Art.",
        "positionetiquette"=>"Pos.",
        "relance1mois"=>"Rel",
        "echantillon"=>"Ech.",
        "certification"=>"Cer.",
        "consolidation"=>"Cns.",
        "etiquette_securite"=>"Sec.",
        "devise"=>"Dev.",
        "montant_total"=>"Total Achat", 
        "statut"=>"Statut",
        "datecreation"=>"Date de création",
        "dateintegration"=>"Date intégration"
    );
    echo $this->getHtmlToCsv($data, $colToShow); 
    exit();
}

Below is the function generating the csv file.

function getHtmlToCsv($elements, $colToShow)
{
    $retour = "<table >"."\n";
    $retour .= "<tr class=\"titre\">"."\n";

    if ($colToShow && is_array($colToShow)) {
        foreach ($colToShow as $col => $libColonne) {
            $retour .= "<td>".strtr(
                $libColonne, get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
            )."</td>"."\n";
        }
    }
    $retour .= "</tr>"."\n";

    foreach ($elements as $element) {
        $retour .= "<tr>"."\n";
        $retour .= "<td>".strtr(
            $element['FOURNISSEUR'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
            )."</td>"."\n" ;

            $retour .= "<td>".strtr(
                $element['LIEUDEPART'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
            $retour .= "<td>".strtr(
                $element['DATEDEPARTPREVUE'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
            $retour .= "<td>".strtr(
                $element['CONFIRME'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
            $retour .= "<td>".strtr(
                $element['MODEPAIEMENT'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['INCOTERM'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['CONTAINER'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['NOCDE'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['NOCDE_ASSOCIEES'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['NOCDE_ERP'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['AA'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['ACP'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['RESP_SUIVI'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
                $retour .= "</tr>"."\n".strtr(
                $element['SHIPPINGMARKS'], get_html_translation_table(HTML_ENTITIES, ENT_QUOTES, "ISO-8859-1")
                )."</td>"."\n" ;
            $retour .= "</tr>"."\n";


    }
    $retour .= "</table>"."\n";
    $retour .= "<br>";

    // Balise qui force le type a texte pour ne subir aucun formattage excel
    $style = "<style>\n"
        . "td{mso-number-format:\"\@\"; border-bottom: 1px solid black; border-right: 1px solid black;}\n"
        . ".titre { font-size: 16px; font-weight: bold;}\n"
        . "table { border: 1px solid black;}\n"
            . "</style>\n";

    $retour = utf8_decode($retour);
    return $retour ;
}

Answer 1

In my Ext.js client side I have this handler on a "button":

handler: function(){
    var url = "rest/my/endpoint/file?limit="+MY.singleton.AppConfig.exportLimit;
    window.open(url,'_blank');
}

And in my server side I'm using Java but the only truly relevant part are the headers you are already providing:

httpHeaders.putSingle("Content-Disposition", "attachment; filename=\"" + FILENAME + "\"");

@Produces({CsvObjectMapperProvider.TEXT_CSV, CsvObjectMapperProvider.APPLICATION_EXCEL})

I would suggest trying out different content types: my app can provide text/csv or application/vnd.ms-excel

Also, make sure the return is valid CSV (no <tags> allowed, proper line break, no "styles"), or that proper Excel format is outputted (not sure on this)