Pobierz plik PDF z odpowiedzi ajax

Question

Próbuję zrobić przeglądarkę pobrać plik pdf otrzymany z odpowiedzi ajax.

Zainspirowany Download pdf file using jquery ajax zasymulować zdarzenie click/download tak:

var req = new XMLHttpRequest(); 
    req.open("POST", "/servicepath/Method?ids=" + ids, true); 
    req.responseType = "blob"; 
    req.onreadystatechange = function() { 
     if (req.readyState === 4 && req.status === 200) { 
      var blob = req.response; 
      var link = document.createElement('a'); 
      link.href = window.URL.createObjectURL(blob); 
      link.download = "PdfName-" + new Date().getTime() + ".pdf"; 
      link.click(); 
     } 
    }; 
    req.send(); 

Niestety to działa tylko w Chrome, ale nie Firefox + IE. Nic się nie dzieje, gdy próbuję uruchomić go w dwóch ostatnich przeglądarkach.

Skrypt i znaczniki są umieszczane wewnątrz elementu iframe z powodu dziedziczenia z systemu zarządzania treścią, ale nie jestem pewien, czy ma to jakikolwiek wpływ.

Każdy pomysł, jak zoptymalizować go dla wszystkich nowoczesnych przeglądarek?

Answer 1

Każdy pomysł, jak zoptymalizować go dla wszystkich nowoczesnych przeglądarek?

Tak, mogę dać rozwiązanie testowane na Windows 10 z IE11, Firefox 47 i Chrome 52. Nic dla Microsoft Edge w tej chwili.

Na początku musisz rozróżnić, czy korzystasz z IE, czy z dwóch innych przeglądarek. To ze względu na IE11 można użyć:

window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf"); 

dla dwóch innych przeglądarek Twój kod działa na Chrome, ale nie w Firefoksie, bo nie dołączyć element do treści dokumentu.

Tak poprawiony kod jest:

var req = new XMLHttpRequest(); 
req.open("POST", "/servicepath/Method?ids=" + ids, true); 
req.responseType = "blob"; 
req.onreadystatechange = function() { 
    if (req.readyState === 4 && req.status === 200) { 

    // test for IE 

    if (typeof window.navigator.msSaveBlob === 'function') { 
     window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf"); 
    } else { 
     var blob = req.response; 
     var link = document.createElement('a'); 
     link.href = window.URL.createObjectURL(blob); 
     link.download = "PdfName-" + new Date().getTime() + ".pdf"; 

     // append the link to the document body 

     document.body.appendChild(link); 

     link.click(); 
    } 
    } 
}; 
req.send(); 

Answer 2

Ta wersja będzie działać we wszystkich nowoczesnych przeglądarek:

var req = new XMLHttpRequest(); 
req.open("POST", "/servicepath/Method?ids=" + ids, true); 
req.responseType = "blob"; 
req.onreadystatechange = function() { 
    if (req.readyState === 4 && req.status === 200) { 
     var filename = "PdfName-" + new Date().getTime() + ".pdf"; 
     if (typeof window.chrome !== 'undefined') { 
      // Chrome version 
      var link = document.createElement('a'); 
      link.href = window.URL.createObjectURL(req.response); 
      link.download = "PdfName-" + new Date().getTime() + ".pdf"; 
      link.click(); 
     } else if (typeof window.navigator.msSaveBlob !== 'undefined') { 
      // IE version 
      var blob = new Blob([req.response], { type: 'application/pdf' }); 
      window.navigator.msSaveBlob(blob, filename); 
     } else { 
      // Firefox version 
      var file = new File([req.response], filename, { type: 'application/force-download' }); 
      window.open(URL.createObjectURL(file)); 
     } 
    } 
}; 
req.send(); 

starałem się dostać również w wersji dla Safari ale to nie działa tak dobrze. Postaram się go zbadać i podać na to rozwiązanie.