最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载. 简介 HTML <a> 元素 (或锚元素) 可以创建一个到其他网页.文件.同一页面内的位置.电子邮件地址或任何其他URL的超链接. href和download是我们下载文件所需要的两个属性:- href:是指这个超链接指向的url地址:- download:该属性是HTML5新增的属性,此属性是让我们的浏览器下载URL而不是跳转到URL所指向的

最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看了看

使用html2canvas 生成尺寸较大 base64 后进行 a标签  download 下载 ,浏览器报网络失败错误 通过谷歌搜索 发现原因是 因为截取尺寸较大  导致生成base64 长度太大 ,达到了a标签的href 上限,所以报错下载失败,解决方案是 将base64 dataURI转换为Blob 文件对象 然后a 链接下载 blob文件路径 // edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanva

一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二.说明: 定义和用法 download 属性规定被下载的超链接目标. 在 <a> 标签中必须设置 href 属性. 该属性也可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等). 注: 1.h

发现一个奇怪的事,看代码 <a id="downloadAlink" target="_blank" href="http://www.baidu.com" download="filename.html">下载</a> 理论上,有 download .target .href ,在这里点击应该是新开标签下载 href 里东西,然而实际上失败的,也就是说,target 本身的作用确实是给 href 的,

在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a'); aLink.href = canvas.toDataURL(); aLink.download = 'spirite.png'; aLink.click(); 但是在 firefox 中,这样就会失败,需要添加到文档里才行, //兼容FF,需要添加到页面中才有用 document.body.

Html5的下载标签download <a href="files/1.jpg" download="1.jpg">Download</a>这样即可把1.jpg文件下载

HTML5-video标签-实现点击预览图播放或暂停视频 刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性.这时我才真的发现到html5和css3的强大. 之前关于视频的控制更多的是运用复杂来实现,但在html5中新加入了<video>标签以及相应的DOM,通过这项新特性,我们能对网页中的视频进行更多简单的控制. 以下属性内容摘抄至W3CSchool 浏览器支持: Internet Explorer 9+, Firefox, Opera, Chrome 以

原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签                    作者:大漠        日期:2014-04-29        通过<Ratchet教程:安装>一文,大家对Ratchet有了一个初步的了解.那么从这一节开始,我们一起来开始实战.通过实战来更好的学习和了解Ratchet,更希望学习了Ratchet之后,大家在制作移动页面的

<a>标签 download属性 <!-- 下载hello.txt --> <a href="test.txt" download="hello">点击下载</a> 说明:hello为浏览器下载后文件的名字,浏览器会自动检测文件的扩展名 href属性 <a href="https://github.com/wmui">GitHub</a> 说明:href值可以是相对地址,绝对

作者:野比 (conmajia@gmail.com) 时间:May, 2012 封面图片为野比原创,请勿未经允许私自引用 #1-1 嗯,各位,又是我,生物钟颠倒的家伙. 今天我要山寨的是大名鼎鼎的Apple,传说中的「被山寨之王」. 没错,都被我山寨好几次了. 说起Apple,相信大家对他家的各种产品,不管他软还是硬,都有相当的好感. 最近Apple把自家的Web浏览器Safari升级到了第5版,并同步推出了Windows版,支持WinXP开始的全部Windows版本. 不得不说,这是一个很给力

场景:做下载二维码功能,使用了a标签+download属性,在使用一段时候后,突然有一个数据下载时候无法识别文件格式,以前都是png下载 原因:因为download="文件名"这里没有设置后缀,猜测a标签会根据href中内容去找文件格式,找不到就成无法识别 解决:在download="文件名.png",我这里只是做二维码图片下载就写死了png

vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->public-->tpls-->下载模板.xls 1.1 直接使用a标签 + download属性 <a :href="downUrl" target="_blank" :download="downNm">下载{{ downTpl

作者:野比 (conmajia@gmail.com) 时间:May, 2012 封面图片为野比原创,请勿未经允许私自引用 #1-1 嗯,各位,又是我,生物钟颠倒的家伙. 今天我要山寨的是大名鼎鼎的Apple,传说中的「被山寨之王」. 没错,都被我山寨好几次了. 说起Apple,相信大家对他家的各种产品,不管他软还是硬,都有相当的好感. 最近Apple把自家的Web浏览器Safari升级到了第5版,并同步推出了Windows版,支持WinXP开始的全部Windows版本. 不得不说,这是一个很给力

对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择“另存为”,这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存页面中的多个链接文件,就得重复操作很多次,最常见的就是英语听力网站上的音频下载,手都要点麻! 本文的目的是介绍如何利用 javascript 进行多文件的下载,也就是当用户点击某个链接或者按钮的时候,

// 最近用到一个保存html为图片到本地的功能(保存到下载目录),记之,该功能IE使用Blob 存储数据,关于兼容性问题参见如下表格,其他浏览器使用a标签download属性新功能下载 BrowserConstructs asFilenamesMax Blob SizeDependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes 500 MiB None

firefox之所以强大,很大程度上是因为它有着超多的扩展组件,来实现许多有趣的功能.这几天把我装的firefox附加组件整理下,个人认为是一般上网常用或者可以说是必备的组件,o(∩_∩)o ,晒晒.文中所提到的组件都可以在https://addons.mozilla.org/zh-CN/firefox/上找到. 1.IE Tab(必备): 在中国,仅支持ie内核的网站还是非常多的,对于这些ie only的网站,firefox是无法正常打开的,所以这个是一定要装的. 点击下ie tab,可以直接

使用Response下载文件,servlet中的文件下载是通过流来实现的   我在webRoot文件夹下新建了一个文件夹from,里边放了一张图片,这里就以下载这张图片为例:download.jsp很简单,只有一个a标签. DownloadAction如下: package com.wang.action; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; impo

本文转载自:http://blog.csdn.net/conmajia/article/details/7596718 作者:野比 (conmajia@gmail.com) 时间:May, 2012 封面图片为野比原创,请勿未经允许私自引用 #1-1 嗯,各位,又是我,生物钟颠倒的家伙. 今天我要山寨的是大名鼎鼎的Apple,传说中的「被山寨之王」. 没错,都被我山寨好几次了. 说起Apple,相信大家对他家的各种产品,不管他软还是硬,都有相当的好感. 最近Apple把自家的Web浏览器Safa

一.在HTMl页面的form表单中对disabled的元素的属性和值不会提交到服务器 实例1: <form action="#"> <input type="text" name='name' value='张三'> <br> <input type="text" name='age' value='13' disabled> <br> <input type="text

使用Canvas绘图,将图片保存到本地方法 一.使用HTML5 a标签的download属性,将图片保存到本地,不需要链接服务器 关于download属性:HTML5 <a>标签download 属性 特别说明:这种方式只支持Google和FF,IE浏览器还不支持. <canvas id="canvas1"></canvas> <br /><br /> <input type="button" val