前端如何实现文件下载，防止浏览器自动打开可预览文件

欢迎踩坑

很高兴陌生的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。谢谢！