# Download per AJAX & Content Type 'application/force-download'



## NetBull (17. Januar 2015)

Hi,

ich hab mir ein kleines Script gebaut das in Artikeln eines CMS (Joomla) Download-Links zu Dateien ermöglicht die nicht im Pfad des Webservers liegen. So können diese nur angemeldete Benutzer sehen und downloaden. 

Funktioniert hervorragend! Leider nur im Chrome Browser. FireFox meckert das Dokument sei nicht länger verwendbar.

```
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
requestObject.responseType = 'blob';
```

Zum Code:
Dazu gibt es ein clickbares ICON das in dieser Art aufgebaut wird:

```
<img
    class="icon docx"
    onclick="loadDocument(this);"
    index="0"
    src="http://192.168.178.34/file-stream/word.png"
    alt="document"
    title="Das ist dann der Tooltip dazu"
>
```

Dann wird auf den Click mit diesen Funktionen reagiert:

```
function loadDocument(element){
    console.log("jQuery Version : " + jQuery.fn.jquery)
    console.log("Initiate document download request");
    var requestObject = getRequestObject();
    requestObject.responseType = 'blob';
    requestObject.open('GET', 'http://192.168.178.34/file-stream/response.php', true);          
    requestObject.onreadystatechange = function() {
        console.log("response readyState (" + requestObject.readyState + ") and status (" + requestObject.status + ")");
     
        if(requestObject.readyState == 4 && requestObject.status == 200) {
            console.log("Final Response has been taken!");
            if( requestObject.response.type!= "" ){
                console.log("Seems to be a valid download ressource!");
                var url = URL.createObjectURL(requestObject.response);                      
                var a = document.createElement('a');
               a.setAttribute('href', url);
               a.setAttribute('download', 'test.pdf');
               a.click();
               URL.revokeObjectURL(url);
               console.log("Download has been done!");
            } else {
                console.log("Seems to be an invalid download ressource!");
                console.log("Download gets aborted!");
            }
        }
    };
    requestObject.send();
}

function getRequestObject(){
    var returnObject;
    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        console.log("initiate XMLHttpRequest");
        returnObject=new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        console.log("initiate Microsoft.XMLHTTP request");
        returnObject=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return returnObject;
}
```

Und hiermit wird von PHP ein Response generiert:

```
$file_path = '/var/www/docs/bescheinigung.pdf';
$file_name = 'bescheinigung.pdf';

if( file_exists($file_path) ){
    header("Content-Type: application/force-download");
    header("Content-type: application/pdf");
    header('Content-Description: File Download');
    header('Content-Disposition: attachment; filename=' . $file_name);
    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($file_path));
    ob_clean();
    flush();
    readfile($file_path);
}
```

Wäre cool wenn mir jemand sagen kann wo mein Fehler ist. 

LG NetBu||


----------



## Cromon (17. Januar 2015)

Hallo NetBull

Du musst:
request = ...;
request.open(...)
request.responseType = 'blob';

Grund dafür ist - so vermute ich - das in Firefox die responseType-Eigenschaft nicht gesetzt werden kann, wenn der Request synchron ist, daher muss zuerst festgestellt werden ob synchron oder asynchron.

Grüsse
Cromon


----------



## Parantatatam (17. Januar 2015)

Was ich nicht ganz verstehe, ist, warum Du jQuery verwendest, aber dann nicht die AJAX-API von jQuery.

```
function loadDocument( element ) {
  $.ajax( 'http://192.168.178.34/file-stream/response.php', {
    'xhrFields' : {
      'responseType' : 'blob'
    },
    'dataType' : 'binary'
  })
  .done(function ( data ) {
    var $a = $( '<a />' ), url = URL.createObjectURL( data );
    $a.attr({
      'href' : url,
      'download' : 'test.pdf'
    })
    .trigger( 'click' );
    URL.revokeObjectURL( url );
  });
}
```


----------



## jeipack (17. Januar 2015)

Hi

versuch mal folgende zwei Zeilen zu tauschen, sodass du den responseType nach open setzt.

```
requestObject.open('GET', '/echo/html/', true); 
requestObject.responseType = 'blob';
```

Aber ich schliesse mich auch Cracks Frage an, wieso benutzt du nicht jQuerys AJAX Methode whenn du jQuery ja eh schon geladen hast.


----------



## Cromon (18. Januar 2015)

Weil ich als nicht-jquery-Nutzer nach kurzem googeln zum Schluss kam, dass einen Blob via Ajax zu erhalten bei jQuery einen relativ grossen Aufwand bedeutet. Daher riet ich ihm gleich direkt mit dem zu Grunde liegenden Objekt zu arbeiten. Scheint offenbar dennoch einfach möglich zu sein.


----------



## NetBull (18. Januar 2015)

Moin, weil....
weil:
Uncaught TypeError: Cannot read property 'ajax' of undefinedlink.html:61 loadDocumentlink.html:89 onclick


----------



## Parantatatam (18. Januar 2015)

Es wäre schön, wenn wir jetzt noch wüssten, welche Zeilen das sind.

Nachtrag: Ich vermute, dass das Problem deshalb auftritt, weil jQuery nicht korrekt eingebunden wurde und dementsprechend die Variable _$_ nicht mit einer Instanz von jQuery belegt ist und somit auch die Funktion/Eigenschaft _ajax_ nicht existiert. Somit kannst Du diesen Aufruf auch nicht nutzen.


```
var isJQuery = ( typeof( $ ) === 'function' && typeof( $.ajax ) === 'function' );
console.log( 'jQuery ist' + ( isJQuery ? ' ' :  'nicht ' ) + 'initialisiert.' );
```


----------



## NetBull (18. Januar 2015)

@einfach nur crack ::

Moin, 

hab das jQuery so eingebunden: Wie initialisiert man das? Hab das noch nie initialisieren müssen. 


```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

    <title>Insert title here</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
       
        function loadDocument( element ) {
            var isJQuery = ( typeof( $ ) === 'function' && typeof( $.ajax ) === 'function' );
            console.log( 'jQuery ist ' + ( isJQuery ? ' ' :  'nicht ' ) + 'initialisiert.' );
             $.ajax( 'http://192.168.178.34/file-stream/response.php', {
               'xhrFields' : {
                 'responseType' : 'blob'
               },
               'dataType' : 'binary'
             })
             .done(function ( data ) {
               var $a = $( '<a />' ), url = URL.createObjectURL( data );
               $a.attr({
                 'href' : url,
                 'download' : 'test.pdf'
               })
               .trigger( 'click' );
               URL.revokeObjectURL( url );
             });
            }
       
       
    </script>
</head>
<body>

<img 
    class="icon docx" 
    onclick="loadDocument(this);" 
    index="0" 
    src="/file-stream/word.png" 
    alt="document" 
    title="Das ist dann der Tooltip dazu"
>
   
<img 
    class="icon docx" 
    onclick="loadDocument(this);" 
    index="0" 
    src="/file-stream/pdf.png" 
    alt="document" 
    title="Das ist dann der Tooltip dazu">

</body>
</html>
```

LG NetBu||


----------



## NetBull (18. Januar 2015)

oops peinlich... lol... 



```
$ = jQuery;
        $( document ).ready(function() {
            $('.documentIcon').click(function(){
                console.log('clicked');
            });
        });
```

natürlich muss ich jetzt initialisieren.....


----------



## NetBull (18. Januar 2015)

so hier mal das jQuery (diesmal initialisiert)

```
$ = jQuery;
        $( document ).ready(function() {
            $('.documentIcon').click(function(){
                var src = $(this).attr('src');
                $.ajax( 'http://192.168.178.34/file-stream/response.php', {
                    'xhrFields' : {
                        'responseType' : 'blob'
                    },
                    'dataType' : 'binary'
                })
                .done(function ( data ) {
                    var $a = $( '<a />' ), url = URL.createObjectURL( data );
                    $a.attr({
                        'href' : url,
                        'download' : 'test.pdf'
                    })
                    .trigger( 'click' );
                    URL.revokeObjectURL( url );
                });
            });
        });
```

Nur bekomme ich immer noch einen Fehler und habe keine Ahnung ....

Chrome sagt: Uncaught InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').jquery.min.js:4 b

FireFox sagt: 

```
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
   

...SON.parse(b+"");var c,d=null,e=m.trim(b+"");return e&&!m.trim(e.replace(xc,funct...
```


----------



## Parantatatam (19. Januar 2015)

Wie ich gerade gesehen habe, muss man sich bei jQuery da doch etwas reinlesen, da jQuery nicht von Haus aus Blobs unterstützt oder besser gesagt keinen Filter dafür vordefiniert hat. Folgendes sollte aber gehen:

```
function loadDocument( element ) {
  $.ajax( 'http://192.168.178.34/file-stream/response.php', {
    'xhrFields' : {
      'responseType' : 'blob'
    },
    'dataType' : 'binary'
  })
  .complete(function ( xhr ) {
    var $a = $( '<a />' ), url = URL.createObjectURL( xhr.response );
    $a.attr({
      'href' : url,
      'download' : 'test.pdf'
    })
    .trigger( 'click' );
    URL.revokeObjectURL( url );
  });
}
```


----------



## NetBull (19. Januar 2015)

@einfach nur crack ::

Guten Morgen,

hab das mal eingesetzt, aber irgendwie scheint kommt die gleiche Fehlermeldung.

```
jquery.min.js:4 Uncaught InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').
```


```
$ = jQuery;
$( document ).ready(function() {
    $('.documentIcon').click(function(){
        var src = $(this).attr('src');
           $.ajax( 'http://192.168.178.34/file-stream/response.php', {
               'xhrFields' : {
                   'responseType' : 'blob'
               },
               'dataType' : 'binary'
        })
        .complete(function ( xhr ) {
            var $a = $( '<a />' ), url = URL.createObjectURL( xhr.response );
            $a.attr({
              'href' : url,
              'download' : 'test.pdf'
            })
            .trigger( 'click' );
            URL.revokeObjectURL( url );
          });
    });
});
```

Bin bei jQuery noch am Anfang und derzeit wünschte ich ich hätt das mit dem Download gar nicht erst angefangen. Wie auch immer, jetzt muss ich durch... (leider nur wenig Zeit, da ich es Ende der Woche fertig haben muss... )

Aktuell frage ich mich warum responseText ein Fehler sein soll... Die verwende ich doch gar nicht. 

LG NetBu||


----------



## Cromon (19. Januar 2015)

Alternativ kannst du ja anstatt mit jquery rumzuknorzen auch einfach deinen alten Code nehmen und die zwei entsprechenden Zeilen vertauschen, es muss nicht immer jQuery sein und man kann auch wenn man jQuery an anderen Orten verwendet mal ein paar Zeilen ohne vollbringen.

Viele Grüsse
Cromon


----------



## NetBull (19. Januar 2015)

@Cromon ::

Guten Morgen, ... 

ich hatte die Zeilen vertauscht, ohne Wirkung. 

LG NetBu||


----------



## Cromon (19. Januar 2015)

Hallo NetBull

Das kann ich mir kaum vorstellen, funktioniert einwandfrei in Firefox:






Im Vergleich dazu:





Viele Grüsse
Cromon


----------



## NetBull (19. Januar 2015)

@Cromon ::

ja aber bekommst dann auch die Datei im Download? 
Bei mir kam immer nur null an...


----------



## Cromon (19. Januar 2015)

@NetBull 

Was ist null? requestObject.response? Kann logischerweise nicht testen, ob ich deine Datei herunterladen kann, einerseits wegen CORS, andererseits weil es sich um eine lokale IP handelt.

Viele Grüsse
Cromon


----------



## Parantatatam (19. Januar 2015)

Die Sache mit dem ._responseText_ ist, dass es nur verfügbar ist, wenn Du Daten als Zeichenkette erhältst, genauso wie es bei ._responseXML_ für XML-strukturierte Daten ist. Da bei _.done( ... )_ die Daten für den ersten Parameter laut den definierten Regeln umgewandelt werden, es aber für _blob_ keine derartige Regel gibt, versucht jQuery es als Text zu interpretieren und ruft dann halt die Eigenschaft auf, die es nicht gibt, da die Daten eben keine Zeichenkette sind. Bei _.complete( ... )_ erhältst Du aber bei keinem der Parameter umgewandelte Daten, sondern als ersten das jXHR-Objekt, was quasi ein standartisiertes XMLHttpRequest-Objekt ist. Warum er jetzt trotzdem _.responseText_ aufruft, ist mir noch nicht ganz klar.

PS: Könntest Du bei Dir mal die "normale" Version von jQuery einbinden, also jene, die nicht minimiert wurde? Dann sehen wir auch, in welcher Zeile genau der Fehler auftritt.


----------



## NetBull (19. Januar 2015)

@einfach nur crack ::
Hab jetzt eine normale Version geladen.
Version 1.11.2
Fehler :
if ( typeof xhr.responseText === "string" ) {
jquery.js (Zeile 9684)

@Cromon :
Hab noch mal mein ursprüngliches Skript verwendet. Stimmt, wenn ich es rumdrehe, bekomme ich keine Fehlermeldung mehr. Im Chrome bekomme ich das erwartete Verhalten, einen Dateidownload, mit einer funktionierenden Datei. Alle anderen Browser machen : NIX! Den Auszug aus dem FireBug habe ich mal in den Anhang gesetzt.

Ausserdem hab ich mal das ganze Projekt gezippt...
siehe file-stream.zip... ich muss aber jetzt nicht jqery umschreiben, oder?   lol


----------



## Cromon (19. Januar 2015)

Hallo Netbull

Habe das ganze mal angesehen. Folgende Änderungen:
Serverseitig:
Sende die Daten als application/octet-stream und nicht als application/pdf. Offenbar akzeptiert firefox application/pdf nicht als gültige Antwort für responseType 'blob'. Also in der response.php einfach nur den folgenden content-typen angeben (du gibst ja jetzt 2 mal an, wobei der erste überschrieben wird):
    header("Content-type: application/octet-stream");

Clientseitig:
Firefox hat gewisse Ansprüche an den link wenn du ihn als Download haben willst. Einerseits scheint createObjectURL nicht auf Anklang zu stossen, andererseits scheint das Element im DOM-Tree sein zu müssen, wenn du das click-event abfeuerst. Folgender Code downloadet im Firefox, Chrome das entsprechende PDF-File, im Internet Explorer geht es natürlich nicht, da dieser das "download"-Attribut nicht kennt:

```
function loadDocument(element){
       console.log("jQuery Version : " + jQuery.fn.jquery)
       console.log("Initiate document download request");
       var requestObject = getRequestObject();
       
       requestObject.open('GET', '/file-stream/response.php', true);
       requestObject.responseType = 'blob';
       
       requestObject.onreadystatechange = function() {
           console.log("response readyState (" + requestObject.readyState + ") and status (" + requestObject.status + ")");
       
           if(requestObject.readyState == 4 && requestObject.status == 200) {
               console.log("Final Response has been taken!");
               if( requestObject.response.type!= "" ){
                   console.log("Seems to be a valid download ressource!");
                   var reader = new FileReader();
                   reader.onloadend = function () {
                       var a = document.createElement('a');
                       a.setAttribute('href', reader.result);
                       a.setAttribute('download', 'test.pdf');
                       a.style.display = 'none';
                       document.body.appendChild(a);
                       a.click();
                       document.body.removeChild(a);
                       console.log("Download has been done!");
                   }

                   reader.readAsDataURL(new Blob([requestObject.response], { type: 'application/pdf' }));            
                 
               } else {
                   console.log("Seems to be an invalid download ressource!");
                   console.log("Download gets aborted!");
               }
           }
       };
       requestObject.send();
    }
```

Viele Grüsse
Cromon


----------



## NetBull (19. Januar 2015)

@Cromon ::

Hey, sieht gut aus. Im Chrome und Feuerfüxle läufts... 
Wie lös ich das im IE? Weil der meggert wie Du sagst: 
SCRIPT575: Der Vorgang konnte aufgrund des folgenden Fehlers nicht fortgesetzt werden: c00c023f.


----------



## Parantatatam (19. Januar 2015)

Auch wenn es häßlich wird, könntest Du beim IE das ganze als verstecktes IFrame einbinden und den entsprechenden Header senden, der den IE dazu auffordert, die Datei herunterzuladen. Ob das besser geht oder ob das überhaupt geht, weiß ich leider nicht.

PS: In welchem Browser hast Du denn mein Skript getestet, dass Dir der Fehler angezeigt wurde? Letztendlich weiß ich, an welcher Stelle der Fehler auftritt und warum, aber ich kann mir nicht erklären, warum der entsprechende Browser das so handhabt, denn letztendlich müsste die Eigenschaft _.responseText_ an der Stelle einfach undefiniert sein, aber eben nicht _inaccessible_.


----------



## NetBull (19. Januar 2015)

@einfach nur crack :: FireFox und Chrome... 
Langsam treibt's mich in den Wahnsinn... lol
Die No-jQuery Lösung vom Cromon rockt am Meisten. 
Nur dumm das es beim IE nicht mitspielt. Da iFrame Option doof. Denn es werden auch Dateien geladen die man nicht in einem Frame darstellen kann (ZIP, RAR; 7ZIP, DOCX, XLSX ....) Glaube nicht das IE so was darstellen kann. lol


----------



## jeipack (19. Januar 2015)

IE entscheided am Header ob eine Datei als Download behandelt wird. Das heisst du kannst nur Serverseitig dafür sorgen, dass es auch im IE klappt.
Was passiert denn jetzt wenn du den Link im IE anklickst?


----------



## NetBull (19. Januar 2015)

@jeipack ::

moin, .. der IE sagt dann: 
SCRIPT575: Der Vorgang konnte aufgrund des folgenden Fehlers nicht fortgesetzt werden: c00c023f.
Wie macht denn der IE das mit den Downloads? Oder besser gefragt war wäre der gescheiteste weg?
Opera / Safari können das übrigens auch nicht leiden. Die machen rein gaaaar nix
Wie debugged man in Opera oder Safari?
Und vor allem wie biete ich die Datei trotzdem zum Donwload an?

LG NetBu||


----------



## jeipack (20. Januar 2015)

http://jsfiddle.net/4wj9L0qs/2/

So klappts im IE:

```
var blob = new Blob([requestObject.response], { type: 'application/pdf' });
                       window.navigator.msSaveBlob(blob, 'test.pdf');
                        alert('File save request made using msSaveBlob() - note the single "Save" button below.');
```
hab ich von: http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx
alert ist notwendig, ansonsten wird das File nicht als download angeboten.

Nun kannst du auf  window.navigator.msSaveBlob abfragen und danach die eine oder eben diese Variante ausführen.


----------



## NetBull (20. Januar 2015)

@jeipack ::

Moin, 

ich fange an JavaScript zu hassen. 
Hab nun den Code von Dir isoliert in ein HTML File geschrieben. 

Fazit: 
Chrome mag damit arbeiten, findet aber : 

```
Uncaught TypeError: undefined is not a function
var blob = new Blob([requestObject.response], { type: 'application/pdf' });
window.navigator.msSaveBlob(blob, 'test.pdf');
alert('File save request made using msSaveBlob() - note the single "Save" button below.');
```

maxton macht mir nun ein Downloadfenster auf

Internet-Explorer ist der Meinung: 

```
SCRIPT5007: Für die Eigenschaft "type" kann kein Wert abgerufen werden: Das Objekt ist Null oder undefiniert
if( requestObject.response.type!= "" ){ ....
```

Opera & Safari machen offensichtlich gar nichts.. Oder zumindest habe ich nicht herausgefunden wie man hier die Console anschaut in der die Ausgaben kommen. 

Warum einigen die sich nicht mal auf einen Standard der für alle Browser gilt? Boah, bin ich froh das die keine Autos bauen, sonst müsste ich 135 Führerscheine machen um jedes Auto fahren zu dürfen. lol

Wie baut man eine gescheite Weiche? Chrome kann mit dem Blob nix anfangen, IE kennt keinen FileReader(). Also nehme ich an ich müsste so was machen if(chrome){}else if(firefox){} elseif(maxton) ....  ?


----------



## Cromon (20. Januar 2015)

Hallo NetBull

Chrome kann mit Blob arbeiten, Chrome kennt aber logischerweise msSaveBlob als Funktion nicht, ms ist das Präfix für Erweiterungen im Internetexplorer. Der Internetexplorer kennt den FileReader durchaus, aber Microsoft scheint es als nicht nötig zu erachten das dowload-Attribut für Links zu implementieren, stattdessen nehmen sie lieber irgendwelche merkwürdigen Workarounds.

Viele Grüsse
Cromon


----------



## NetBull (20. Januar 2015)

Wie fängt man das denn ab? Bzw. was ist eine sinnvolle IF / ELSE Konstruktion. Ein if(FileReader !=undefined) hat nicht geholfen.. Würde gerne die Browser abfangen und jedem sein eigenes Script ausführen lassen. Wie fängt man die Browser am besten ab?


----------



## Parantatatam (20. Januar 2015)

Du hast gerade die erste und wichtigste Lektion bei JavaScript gelernt: jeder Browserentwickler glaubt, dass sein Weg der einzig richtige ist. Aber es war früher noch viel, viel schlimmer. Seit HTML5 gibt es einen einheitlichen Standard, nur ist dieser teilweise noch nicht im Endstadium, weshalb erst einmal noch alle Browser ihren eigenen, wenn auch meistens (abgesehen von Microsoft) gleichen, Weg gehen. Außerdem sind die Implementationfortschritte auch unterschiedlich. Aber das wird langsam.


			
				Martin Luther King hat gesagt.:
			
		

> I have a dream that one day I will write code for a browser and it works in every one the same way.


----------



## Cromon (20. Januar 2015)

@NetBull 
Den IE solltest du anhand von if((typeof window.navigator.msSaveBlob) !== "function") erkennen können. Andernfalls einfach die Link-Variante verwenden.


----------



## NetBull (20. Januar 2015)

Hmmm.. deswegen versuche ich JavaScript immer zu vermeiden....


----------



## NetBull (20. Januar 2015)

OK, das Problem ist schon weiter oben. 


```
console.log("type   --> " + requestObject.responseType);
console.log("state  --> " + requestObject.readyState);
console.log("status --> " + requestObject.status);
```

Diese drei Zeilen sind erst mal im Einsatz um Entscheidungen zu treffen ob überhaupt was brauchbares vom Server kam. 


```
CHROME: kommt damit klar und alle drei Ausgaben werde in der Konsole gezeigt!
```


```
FIREFOX: kommt auch damit klar und alle drei Ausgaben werde in der Konsole gezeigt!
```


```
MAXTON: kommt auch damit klar und alle drei Ausgaben werde in der Konsole gezeigt!
```


```
IEXPLORER: hat einen Fehler zu melden, läuft aber weiter:
SCRIPT575: Der Vorgang konnte aufgrund des folgenden Fehlers nicht fortgesetzt werden: c00c023f.
Angeblich ist das ein Problem: console.log("status --> " + requestObject.status);
test.html, Zeile 21 Zeichen 6
```
Was ist bitte schön Zeichen 6? Wenn ich durchzähle, dann wäre es das 'e' in Consol*e
*

```
SAFARI: Keine Ahnung, finde die Konsole nicht um die Ausgaben zu sehen.
```


```
OPERA: Keine Ahnung, finde die Konsole nicht um die Ausgaben zu sehen.
```
 
*Frage 1: Wie komm ich bei Opera und Safari in die Konsole rein?* 
*Frage 2: Hab ich noch wichtige Browser vergessen?* 

LG NetBu||

Hier noch mal das komplette Beispiel....

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

function loadDocument(element){
    console.log("Initiate document download request");
    var requestObject = getRequestObject();
   
    requestObject.open('GET', '/file-stream/response.php', true);
    requestObject.responseType = 'blob';
   
    requestObject.onreadystatechange = function() {        
       
        console.log("type   --> " + requestObject.responseType);
        console.log("state  --> " + requestObject.readyState);
        console.log("status --> " + requestObject.status);
        if(requestObject.readyState == 4 && requestObject.status == 200) {
            console.log("ready state und status sind OK");
            // hier steigt 
        }        
    };
    requestObject.send();
 }

function getRequestObject(){
 var returnObject;
 if (window.XMLHttpRequest)
 {
     // code for IE7+, Firefox, Chrome, Opera, Safari
     console.log("initiate XMLHttpRequest");
     returnObject=new XMLHttpRequest();
 }
 else
 {
     // code for IE6, IE5
     console.log("initiate Microsoft.XMLHTTP request");
     returnObject=new ActiveXObject("Microsoft.XMLHTTP");    
 }
 return returnObject;
}

loadDocument("a")

</script>

</head>
<body>

</body>
</html>
```


----------



## Parantatatam (20. Januar 2015)

Unter Mac findet man beim Safari in den Einstellungen unter dem Punkt "Erweitert" das Feld "Entwicklermenü anzeigen". Wenn Du das aktivierst, dann wird Dir das Entwicklermenü angezeigt, in dem Du auch die Fehlerkonsole findest.


----------



## NetBull (20. Januar 2015)

@einfach nur crack :: cool. Safari hat eine Console. Weis nur nicht warum man die verstecken muss. 
Und Safari kann auch mit folgendem Code nix anfangen
console.log("type   --> " + requestObject.responseType);
ergibt: type  --> 
Also noch nicht mal undefined. 
Gibt es irgendwo eine Liste welche Konstrukte für welchen Browser funktionieren? Weil den Type wirds wohl brauchen um den Download zu initiieren? Oder?


----------



## Parantatatam (20. Januar 2015)

Für so etwas ist Can I use? meist sehr hilfreich. Ansonsten eben die offiziellen Dokumentationen der einzelnen Browser.


----------



## NetBull (20. Januar 2015)

Danke Dir.. Der Link ist praktisch.


----------



## NetBull (27. Januar 2015)

Die Krise kriech... 

Hi All,... 

also irgendwie komm ich kein Bisschen weiter. 
Bis zur Auswertung des Response geht alles. Aber......

Code: 

```
function loadDocumentFromResponse(requestObject, filename){
            console.log('Response from Server gets analyzed...');                       
            if( typeof URL === "function" ){               
                // das geht mit Chrome und da gibt es auch einen Download
                // Firefox kennt URL, erzeugt aber keinen Download ...???
                console.log('Will use the URL function to revoke an object url');
                var url = URL.createObjectURL(requestObject.response);
                var a = document.createElement('a');
                a.setAttribute('href', url);
                a.setAttribute('download', filename);
                a.click();
                URL.revokeObjectURL(url);
                // chrome macht es hier richtig und es gibt einen gültigen Download
                // firefox macht NICHTS!
            }else{
                // IE, Maxton, Safari and Opera werfen eine Exception, aber wie geht es dann hier weiter?
                console.log('Function URL ist unbekannt');
            }
        }
```

im IF Zweig macht Chrome es hervorragend, FireFox nicht und es meckert nicht mal. Irgendeine Idee?
Um die anderen kümmer ich mich danach. Gehe die Möglichkeiten nun einzeln durch,....

LG NetBu||


----------

