如何使用内容处理强制文件下载到硬盘驱动器?

我想强制浏览器下载一个 pdf文件。

我使用以下代码:

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

它使浏览器在一个新的窗口中打开 pdf,但我希望当用户点击它时,它能下载到硬盘上。

我发现 Content-disposition用于此,但是如何在我的案例中使用它呢?

170422 次浏览

On the HTTP Response where you are returning the PDF file, ensure the content disposition header looks like:

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

See content-disposition on the wikipedia MIME page.

With recent browsers you can use the HTML5 download attribute as well:

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

It is supported by most of the recent browsers except MSIE11. You can use a polyfill, something like this (note that this is for data uri only, but it is a good start):

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

})();