Cómo usar Content-disposition para forzar la descarga de un archivo en el disco duro?

Question

Quiero obligar al navegador a descargar un archivo pdf.

estoy usando el siguiente código:

<a href="../doc/quot.pdf" target=_blank>Click here to Download quotation</a> 

Esto hace que el navegador abra el PDF en una nueva ventana, pero quiero que se descargue en el disco duro cuando un usuario hace clic en él.

Encontré que Content-disposition se usa para esto, pero ¿cómo lo uso en mi caso?

Answer 1

En la respuesta HTTP, donde va a devolver el archivo PDF, garantizar el encabezado de disposición de contenido se ve como:

Content-Disposition: attachment; filename=quot.pdf; 

Ver content-disposition en la página de Wikipedia MIME.

Answer 2

Con navegadores actuales puede utilizar el atributo de descarga HTML5 así:

<a download="quot.pdf" href="../doc/quot.pdf">Click here to Download quotation</a> 

Es apoyado por la mayor parte de los últimos navegadores excepto MSIE11. Puede usar un polyfill, algo como esto (tenga en cuenta que esto es solo para datos uri, pero es un buen comienzo):

(function(){ 

    addEvent(window, "load", function(){ 
     if (isInternetExplorer()) 
      polyfillDataUriDownload(); 
    }); 

    function polyfillDataUriDownload(){ 
     var links = document.querySelectorAll('a[download], area[download]'); 
     for (var index = 0, length = links.length; index<length; ++index) { 
      (function (link){ 
       var dataUri = link.getAttribute("href"); 
       var fileName = link.getAttribute("download"); 
       if (dataUri.slice(0,5) != "data:") 
        throw new Error("The XHR part is not implemented here."); 
       addEvent(link, "click", function (event){ 
        cancelEvent(event); 
        try { 
         var dataBlob = dataUriToBlob(dataUri); 
         forceBlobDownload(dataBlob, fileName); 
        } catch (e) { 
         alert(e) 
        } 
       }); 
      })(links[index]); 
     } 
    } 

    function forceBlobDownload(dataBlob, fileName){ 
     window.navigator.msSaveBlob(dataBlob, fileName); 
    } 

    function dataUriToBlob(dataUri) { 
     if (!(/base64/).test(dataUri)) 
      throw new Error("Supports only base64 encoding."); 
     var parts = dataUri.split(/[:;,]/), 
      type = parts[1], 
      binData = atob(parts.pop()), 
      mx = binData.length, 
      uiArr = new Uint8Array(mx); 
     for(var i = 0; i<mx; ++i) 
      uiArr[i] = binData.charCodeAt(i); 
     return new Blob([uiArr], {type: type}); 
    } 

    function addEvent(subject, type, listener){ 
     if (window.addEventListener) 
      subject.addEventListener(type, listener, false); 
     else if (window.attachEvent) 
      subject.attachEvent("on" + type, listener); 
    } 

    function cancelEvent(event){ 
     if (event.preventDefault) 
      event.preventDefault(); 
     else 
      event.returnValue = false; 
    } 

    function isInternetExplorer(){ 
     return /*@cc_on!@*/false || !!document.documentMode; 
    } 

})();