IE9 download issue php pdf and other files

Question

I have a PHP function which downloads differents files after clicking on a button (If we click on PDF button, it will load a pdf file, if we click on DOC button, it will load a doc file). It is the same function for both buttons.

My problem is when I download a file. If it's the PDF, IE will open an other page, and will close it and give me the choice to download the file, but if it's the DOC, IE will open an other page, and not close it.

The code is (for me) the same, I don't see any differences.

<pre>
<code>
    public function lettrecadrageAction() {

     $nom = $_POST['type'];
     switch ($nom):

      case 'Fichier DOC' :

       $path = "ddl/lettre_de_cadrage.doc";
       header('Content-Description: File Transfer');
       header("Content-Type: application/force-download");
       header("Content-Disposition: attachment; filename=lettre_de_cadrage.doc");
       header('Content-Transfer-Encoding: binary');
       header('Expires: 0');
       header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
       header('Pragma: public');
       header('Content-Length: ' . filesize($path));
       ob_clean();
       flush();
       readfile($path);
       break;

      case 'Fichier PDF' :

       $path = "ddl/lettre_de_cadrage.pdf";
       header('Content-Description: File Transfer');
       header('Content-Type: application/force-download');
       header("Content-Disposition: attachment; filename=lettre_de_cadrage.pdf");
       header('Content-Transfer-Encoding: binary');
       header('Expires: 0');
       header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
       header('Pragma: public');
       header('Content-Length: ' . filesize($path));
       ob_clean();
       flush();
       readfile($path);
       break;
      endswitch;
     exit;
    }
</code>
</pre>

The Js action for click

<pre>
    <code>
$('.ldc_dl').click(function() {
        var f = document.createElement("form");
        f.method = "POST";
        f.name = "form";
        f.target = "_blank";
        f.setAttribute('style', 'display: none;');
        f.action = "http://" + document.domain + "/Exploitation/lettrecadrage/";
        var fHtml = document.createElement("input");
        fHtml.type = "text";
        fHtml.name = "type";
        fHtml.value = $(this).html();
        console.log(fHtml);
        var fSubmit = document.createElement("input");
        fSubmit.type = "submit";
        f.appendChild(fHtml);
        f.appendChild(fSubmit);
        document.body.appendChild(f);
        f.submit();
        document.body.removeChild(f);

        return true;
    }) </code>
</pre>

The HTML code for the buttons

<pre>
  <code>
    <div class="tab-pane fade" id="ldc"> 
        <p>La lettre de cadrage est disponible en <button id="ldc_dl_doc" class="btn btn-link ldc_dl" type="button">Fichier DOC</button></p>
        <p> Ou en <button id="ldc_dl_pdf" class="btn btn-link ldc_dl" type="button">Fichier PDF</button></p>
    </div>
  </code>
</pre>

(The buttons are 'Fichier PDF' and 'Fichier DOC')

Edit - Solution

With the help of jbl in comments, I resolved my problem, using an iframe :

var frame = document.createElement("iframe");
frame.setAttribute("src", "_blank");

and modify my form target

            f.target = frame;

Answer 1

Content-Transfer-Encoding header is used in MIME email messages. It has no any sense to send it over HTTP.

Content-Disposition: attachment; header says the browser to save it rather then open in the browser. So instead of Content-Type: application/force-download i would suggest to use proper content-type for PDF and DOC files:

Content-Type: application/pdf
Content-Type: application/vnd.ms-word

Answer 2

With the help of jbl in comments, I resolved my problem, using an iframe :

var frame = document.createElement("iframe");
frame.setAttribute("src", "_blank");

and modify my form target

        f.target = frame;