前端如何實現文件下載，防止瀏覽器自動打開可預覽文件

歡迎踩坑

很高興陌生的coder你能點進來，恭喜你，希望我的這篇博客能幫你解決瀏覽器自動預覽txt，pdf等可預覽文件，而不是下載這個文件。這篇博客是我踩了很多網上的案例教程才總結出來的，希望可以幫到你。

踩坑記錄一

window.open()方法

首先給大家解釋一下window.open()這個方法。

Window 接口的 open() 方法，是用指定的名稱將指定的資源加載到瀏覽器上下文（窗口 window ，內嵌框架 iframe 或者標籤 tab ）。如果沒有指定名稱，則一個新的窗口會被打開並且指定的資源會被加載進這個窗口的瀏覽器上下文中。

//後臺傳來的下載路徑url:https://106.14.15.103:8000/downloadFile/test
//前端核心代碼
window.open(url);

很明顯這個方法只能將指定路徑的資源加載到瀏覽器裏，如果該文件不能被瀏覽器預覽，瀏覽器就會下載該文件，但是，如果瀏覽器可以預覽該文件呢？是不是這個方法不可以實現？這是我第一次接觸文件下載這個需求的時候踩的坑，當時要求下載一個txt文本，用該方法瀏覽器會直接預覽該txt文件。這就難受了啊。繼續踩坑！！！！

踩坑記錄二

html的a標籤

a標籤的href屬性指定下載文件的路徑，download指定下載文件保存時的名稱。這個方法似乎也不行。我看了很多教程說這個方法能有效解決瀏覽器預覽文件而不是下載文件的這個問題。但是我用的時候似乎並沒有解決。苦惱崩潰啊！！！沒得辦法要繼續踩坑～～

<a href="https://106.14.15.103:8000/downloadFile/test" download="test.txt">下載</a>

踩坑記錄三

window.location.href方法

這個方法跟上面的踩坑記錄二的方法其實效果是一樣的，window.location.href=“http://下載.rar” ，等同於下載。爲了方便初學者和年輕的coder們，我將它也寫出來。

window.location.href="https://106.14.15.103:8000/downloadFile/test"

至於結果怎麼樣我就不給你講了，肯定要接着踩坑！！！

解決問題

使用XMLHttpRequest對象

至於XMLHttpRequest對象的介紹，請大家自行MDN，因爲對這個我也不是很瞭解，這個是一個好心的羣聊網友幫忙解決的，如果日後你牛逼起來了，請用一顆善良的心對待任何一個年輕的coder，因爲他們也渴望進步！

function downloadFile(record, fileName) {
  var request = new XMLHttpRequest();
  request.responseType = "blob";//定義響應類型
  request.open("GET", ServerIP + record);
  request.onload = function () {
    var url = window.URL.createObjectURL(this.response);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = fileName
    a.click();
  }
  request.send();
}
let url = "https://106.14.15.103:8000/downloadFile/test";
<button onClick={()=>downloadFile(url,"text.txt")}>下載</button>
//上面的是es6的箭頭函數的寫法，結合react寫的，原生的寫法我在下面寫給大家看。

原生的寫法

//省略其他部分
<button onclick="downloadFile()">Download</button>
<script>
function downloadFile(){
    var request = new XMLHttpRequest();
        request.responseType = "blob";
        request.open("GET", "https://arxiv.org/ftp/arxiv/papers/2001/2001.09612.pdf");
        request.onload = function() {
            var url = window.URL.createObjectURL(this.response);
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.href = url;
            a.download = "your_download.pdf"
            a.click();
        }
        request.send();
}
</script>

在此真心的感謝當年那個幫助我的陌生網友！該篇博客至此已經寫完。如有不對之處請大神不吝賜教，如有不懂之處也可加我qq私聊我，1822497204。謝謝！