通过浏览器无刷新直接下载文件

发布于 2017-10-22 字数 2107 浏览 1769 评论 0

浏览器默认是可以打开一些常见的网页开发文件,比如CSS、HTML、JS等,但是有时候我们需要直接保存这些文件,而不是通过浏览器打开,然后由用户选择是否保存文件。

通过浏览器无刷新直接下载文件

已知 MIME type 的文件

对于浏览器无法打开的文件,浏览器默认会弹出一个下载确认框,提示用户保存文件,这个都很好办,常见的就是RAR压缩包文件

无刷新下载 rar 之类的文件很好实现:

  • 通过 meta 标签: <meta http-equiv="refresh" content="url=http://down.load/file.rar">
  • 通过 Javascript 重定向: window.location.assign("http://down.load/file.rar")
  • 通过 Javascript 构建隐藏的 iframe 并设置 src $(body).append('<iframe style="display:none;" src="http://down.load/file.rar"')

以上的实现均可以在当前页面无刷新进行。

如果是浏览器能够打开的文件,浏览器就会直接显示或者调用相关的插件来显示文件的内容,但是我们现在需要直接能够下载文件。

Content-disposition

Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件。当浏览器接收到头时,它会激活文件下载对话框,它的文件名框自动填充了头中指定的文件名。

使用方式如 Content-Disposition: attachment; filename="fname.ext"fname.txt 是定义保存的名称,可随意指定。通过设置 HTTP header 中的Content-disposition ,就可以为图片临时定义新的 MIME,实现访问时提示保存。简单的 PHP 实现如下:

header('Content-Disposition: attachment; filename=girl.png');
// 禁止浏览器缓存,否则IE下可能会失效
header("Pragma: No-cache");
header("Cache-Control: No-cache");
header("Expires: 0");
 
// 简单的返回文件
echo file_get_contents('http://localhost/girl.png');

设置好 Content-disposition ,再利用前面提到的无刷新下载文件就可以实现图片的无刷新下载了,要实现 TXT、CSS、JPG、PNG、PHP 等文件下载也是如此。不过单纯通过 JavaScript 无法定义 Content-disposition。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!