Cách sử dụng Bố cục nội dung để buộc tệp tải xuống ổ cứng?

Question

Tôi muốn buộc trình duyệt tải xuống tệp pdf.

Tôi đang sử dụng đoạn mã sau:

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

Nó làm cho trình duyệt mở pdf trong một cửa sổ mới, nhưng tôi muốn nó tải về vào ổ đĩa cứng khi người dùng nhấp nó.

Tôi thấy rằng Content-disposition được sử dụng cho điều này, nhưng làm cách nào để sử dụng trong trường hợp của tôi?

Answer 1

Trên đáp ứng HTTP nơi bạn đang trở về tập tin PDF, đảm bảo các tiêu đề bố trí nội dung trông giống như:

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

Xem content-disposition trên trang wikipedia MIME.

Answer 2

Với các trình duyệt gần đây bạn có thể sử dụng tải về thuộc tính HTML5 cũng như:

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

Nó được hỗ trợ bởi hầu hết các trình duyệt gần đây ngoại trừ MSIE11. Bạn có thể sử dụng một polyfill, một cái gì đó như thế này (lưu ý rằng đây là chỉ cho dữ liệu uri, nhưng là một khởi đầu tốt):

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

})();