java-北京-菜鸟的gravatar头像
java-北京-菜鸟 2015-02-28 09:51:48

html页面使用如何js下载服务器mp3文件而不是在线打开播放?

今天遇到一个问题,静态化页面上有一个下载MP3文件的功能,但是用a标签指向服务器上文件地址时,点击a标签,浏览器会自动打开该MP3文件,但是现在需要下载,不需要打开,请问有哪位大神能指点一下?注:服务器上只有html页面,相关的js,css文件和附件.

所有回答列表(2)
最代码官方的gravatar头像
最代码官方  LV168 2015年2月28日

浏览器对服务端响应Content-Type的处理方式不同:

  文件类型 Content-Type 类型
常见类型 文本 text/plain
二进制流 application/octet-stream
RAR 压缩包 application/x-rar-compressed
Zip 压缩包 application/zip
Flash 文件 application/x-shockwave-flash
QuickTime 视频 video/quicktime
MP4 视频 video/mp4
MP3 音频 audio/mpeg
JPEG 图片 image/jpeg
GIF 图片 image/gif
PNG 图片 image/png
书写有误类型 数据 application
音频 audio
视频 video
图像 image
浏览器不可识别类型 自定义类型 helloworld

分别以不同 HTTP Content-Type 报头类型运行此段代码,在不同的浏览器环境中的表现如下:

  IE6 IE7 IE8 Firefox Chrome Safari Opera
text/plain 显示文件内容 显示文件内容 显示文件内容 显示文件内容 显示文件内容
application/octet-stream 显示文件内容 下载文件 下载文件 下载文件 显示文件内容
application/x-rar-compressed 下载文件1 下载文件 下载文件 下载文件 下载文件
application/zip 下载文件1 下载文件 下载文件 下载文件 下载文件
application/x-shockwave-flash 试图显示 Flash 试图显示 Flash 试图显示 Flash 试图显示 Flash 试图显示 Flash
video/quicktime 下载文件 下载文件 下载文件 下载文件 下载文件
video/mp4 下载文件 下载文件 试图播放视频3 下载文件 下载文件
audio/mpeg 下载文件 下载文件 试图播放视频3 下载文件 下载文件
image/jpeg 显示文件内容 试图显示图片2 试图显示图片 试图显示图片 试图显示图片
image/gif 显示文件内容 试图显示图片2 试图显示图片 试图显示图片 试图显示图片
image/png 显示文件内容 试图显示图片2 试图显示图片 试图显示图片 试图显示图片
application 下载文件1 显示文件内容 显示文件内容 下载文件 显示文件内容
audio 下载文件1 显示文件内容 显示文件内容 下载文件 显示文件内容
video 下载文件1 显示文件内容 显示文件内容 下载文件 显示文件内容
image 下载文件1 显示文件内容 显示文件内容 下载文件 显示文件内容
helloworld 下载文件1 显示文件内容 显示文件内容 下载文件 显示文件内容

【注1】:这几种 Content-Type 类型在测试环境中的 IE6 IE7 IE8 浏览器弹出的下载对话框提示中,均显示“不可识别类型”

【注2】:Firefox 会将 URL 和一些错误信息输出在图片格式中显示。

【注3】:Chrome 试图使用 VIDEO 标记直接显示这两种格式的视频。

由表可见:

  • IE6 IE7 IE8 对于可以识别的非视频、音频流内容均会嗅探其内容,并且根据内容是否正常再决定如何输出显示;
    (关于嗅探的扩展阅读:CH9002: IE6 IE7 IE8 未按预期方式处理 content-type 为 text/plain 的内容
  • Firefox Chrome 对于未知 Content-Type 的内容均直接显示其内容,其他类型则以直接以最合适的方式处理;
  • Opera 对于可以识别的视频、音频流内容会直接提示下载,图片类型和 Flash 类型会试图显示他们,未知 Content-Type 的内容均直接显示其内容则直接显示其内容,但在显示内容前不会嗅探其中的 HTML 标记。

参考:

http://www.w3help.org/zh-cn/causes/CH9001 

评论(0) 最佳答案
a229513407的gravatar头像
a229513407 2016年10月10日

楼主最后怎么解决的啊~~

顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友