H5点击按钮下载文件

有没有做过类似效果的,能看一下代码吗
clipboard.png

阅读 12.5k
3 个回答

了解HTML/HTML5中的download属性
HTML download 属性
例如:

<a href="/images/myw3schoolimage.jpg" download="w3logo">

把上面的a标签做成按钮样子即可。

补充;
a - HTML 属性

download 属性
此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
如果属性有一个值,它将在保存提示中用作预先填写的文件名 (用户仍然可以根据需要更改文件名)。对允许的值没有限制,但是/和被转换为下划线。大多数文件系统限制文件名中的一些标点符号,浏览器会相应地调整建议的名称。
注意:
此属性仅适用于同源 URLs。
可以使用 blob: URLs 和 data: URLs 以方便用户下载 JavaScript 方式生成的内容(例如使用在线绘图的Web应用创建的照片)。
如果HTTP头的Content-Disposition:存在,并且赋予了一个和这个属性不同的文件名,HTTP头优先于此属性。
如果这个属性存在 Content-Disposition 被设置为 inline,火狐优先 Content-Disposition,像之前文件名​​的情况下,而Chrome则优先 download 属性。

可以参考下filesaver.js

有地址就window.location.href=url或者window.open

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题