强制浏览器下载文件而不是查看文件内容

[Dream4ever]

问题描述

公司的一个网站上，放了一些文件供用户下载。最近有用户反映在 QQ 浏览器中点击 PPT 文件，不是下载文件，而是直接在浏览器中显示 PPT 的内容。

问题解决

上网查了一下 QQ 浏览器官网的功能介绍，原来是自带 Office 文档的查看功能。要解决这个问题，就需要让浏览器强制下载 Office 文档，而不是在浏览器中直接打开，就像浏览器对 PDF 的处理那样。

上网查了一下，在 Stack Overflow 的一篇问答 Force to open “Save As…” popup open at text link click for PDF in HTML 中，提到要给 a 标签增加 download 属性来强制下载文件，另外最好再加上 target="_blank" 这么一条属性，来尽量保证下载功能的正常。

实际测试了一下，加上这两个属性之后，QQ 浏览器果然能正常下载了，问题解决。

PS：由于网站上的资源只想让注册/登录用户下载，而给 a 标签添加 href 属性之后，默认情况下点击 a 标签会立刻下载 href 属性中的文件。因此为了在特定情况下禁止弹出下载对话框，还需要在 a 标签的 click 事件中执行 e.preventDefault()。

参考资料

• Force to open “Save As…” popup open at text link click for PDF in HTML
• : The Anchor element：介绍了 download 属性
• Prevent anchor behaviour