Загрузить pdf-файл из ответа ajax

Question

Я пытаюсь загрузить браузер в pdf-файл, полученный из ответа ajax.

Вдохновленный Download pdf file using jquery ajax Я имитировать событие щелчка/загрузки, как это:

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(); 

К сожалению, это работает только в Chrome, но не Firefox + IE. Ничего не происходит, когда я пытаюсь запустить его в последних двух браузерах.

Сценарий и разметка помещаются внутри iframe из-за наследования с CMS, но я не уверен, что это имеет какое-то влияние a.

Любая идея о том, как оптимизировать его для всех современных браузеров?

Answer 1

Любая идея о том, как оптимизировать ее для всех современных браузеров?

Да, я могу дать вам решение, протестированное в Windows 10 с IE11, Firefox 47 и Chrome 52. Ничего для Microsoft Edge в данный момент.

В начале вам нужно различать, находитесь ли вы в IE или в других двух браузерах. Это потому, что на IE11 вы можете использовать:

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

Для двух других браузеров ваш код работает на Chrome, но не на Firefox, потому что вы не добавить элемент в теле документа.

Так исправленный код:

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

Эта версия будет работать во всех современных браузерах:

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(); 

Я пытался получить также версию для сафари, но он не работает так хорошо. Постараюсь продолжить расследование и дать решение для этого.