admin 管理员组

文章数量: 887021

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

  • 欢迎踩坑
  • 踩坑记录一
    • **window.open()方法**
  • 踩坑记录二
    • **html的a标签**
  • 踩坑记录三
    • **window.location.href方法**
  • 踩坑记录四
    • **使用XMLHttpRequest对象**
  • 解决办法
    • 服务端在头部加字段Content-Disposition

欢迎踩坑

很高兴陌生的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写的，原生的写法我在下面写给大家看。

原生的写法

exportFile.onclick = function() {
    var pathOfFileExported = exportFile.getAttribute('data-file_path');
 
    if(pathOfFileExported) {
        var xmlHttp = null;
        if(window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
 
        xmlHttp.open('GET', pathOfFileExported, true);
        xmlHttp.responseType = 'bold';
        xmlHttp.onload = function() {
            var url = window.URL.createObjectURL(this.response);
            var a = document.createElement('a');
            var name = url.substr(path.lastIndexOf("/") + 1);
 
            a.style.display = 'none';
            document.body.appendChild(a);
            a.href = url;
            a.download = name;
            a.click();
            a.remove();
        }
        xmlHttp.send();
    }
}

这种写法根据网友的评论和测试说是不兼容ios操作系统，鉴于本人学术不精，在此更新该片博客，对之前留言的小伙伴儿和大神们表示真心的感谢！并且附上了大神的写法！在我求职应聘的过程中，我了解到了http里的一个头部字段Content-Disposition，后来才发现解决文件下载问题真的超级简单，本身就不是问题，原因很简单自己大学没有把专业理论课学扎实！

解决办法

服务端在头部加字段Content-Disposition

如果不知道这个怎么用的话，可以参照我下面这个去设置头部字段对应的值。

200 OK
Content-Type: text/html; charset=utf-8
Content-Disposition: attachment; filename="cool.html"
Content-Length: 22
<HTML>Save me!</HTML>

写博客不易，如果这篇博客帮助到了你，赏个三连再走啦，或者打个赏啥的哈哈！
顺便打个广告，后续我的技术博客将更新到
挽枫的个人博客

本文标签： 文件 如何实现 浏览器

版权声明：本文标题：前端如何实现文件下载，防止浏览器自动打开可预览文件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726855050h1040175.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。