jQuery --- 利用a标签的download属性下载文件！

最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行预览,例如:txt / img / pdf 这些文件的下载可以使用 a 标签的download 属性来进行下载: 参考: http://www.w3school.com.cn/tags/att_a_download.asp https://blog.csdn.net/cynl7/article/de…

a 标签的download 属性在谷歌浏览器下无法下载图片，如何处理？

a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片.这个兼容性问题如何解决呢? 了解了一番,HTMLCanvasElement.toBlob()方法可以用以展示canvas上的图片:这个图片文件可以被缓存或保存到本地,由用户代理端自行决定. 更多HTMLCanvasElement.toBlob()详情前去https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasEle…

HTML5 a标签的download属性

介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> <p>点击 W3School 的 logo 来下载该图片:<p> <a href="/i/w3school_logo_white.gif" download="w3logo"> <img border="0"…

a标签的download属性简介

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

js a 标签通过download 实现下载功能

download 属性规定被下载的超链接目标. 在 <a> 标签中必须设置 href 属性. 该属性也可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等). <a href="url" download="name"> <img border="0" src="/i/w3school_logo_wh…

a标签的download属性

a标签加上downlaod属性后,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download属性会失效. 无download属性的时候,a标签的默认行为是链接跳转进行预览,而针对浏览无法预览的文件,也可达到下载的效果. 怎么解决下载非同源文件的问题?? 例如image图片方法: 通过canvas绘制,生成临时路径 ( data协议路径 // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAP…

利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作

由于平时对元素样式的控制基本上只是3,4个,所以一般用Jquery的时候直接使用$(element).css();这个方法,或者使用$(element).addClass()方法完成样式操作.对于小范围元素的操作来说,这是非常方便的.但是当针对众多元素同时进行操作的时候呢,这2个方法让代码看起来就比较重量级了,代码的可读性也比较小. 过程起初,我先尝试了一种方式,就是在JS代码中动态插入link标签,引入新的样式文,但是很遗憾的是根本就不起作用,因为那个时候浏览器已经把样式渲染到页面元素了,新引…

jquery给input标签添加data-options属性

//原生JS实现document.getElementById('startPrice').setAttribute("data-options", "required:false,validType:'number',validType:'length[1,12]'"); //jquery实现$('#startPrice').attr("data-options", "required:false,validType:'number'…

HTML5 a标签的down属性进行图片下载

a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的download属性以及canvas的toDataURL() selector: 图片的选择器 name:被下载图片的命名 */ downloadPicture (selector, name) { let image = new Image() // 解决跨域 Canvas 污染问题 image.se…

JS前端下载文本文件小技巧：1、download属性；2、借助Blob转换成二进制下载

一.HTML download 与文件下载如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large.jpg" download>下载</a> 但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力. 例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借助J…

前端通用下载文件方法（兼容IE）

之前在网上看到一个博主写的前端通用的下载文件的方法,个人觉得很实用,所以mark一下,方便以后查阅源文地址(源文还有上传/下载excel文件方法) 因为项目要求要兼容IE浏览器,所以完善了一下之前博主的方法 IE 浏览器:使用微软自带的msSaveBlob 方法,a标签的download属性不支持IE 谷歌浏览器(只测试过谷歌):创建a标签 ,添加download属性,模拟鼠标点击事件 //这里res.data是返回的blob对象 var blob = new Blob([res.data.f…

HTML <a> download 属性,点击链接来下载图片

Html5里面的标签的 Download 属性可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等), 但是 Download 的兼容性不怎么样,只有 Firefox 和 Chrome 支持 download 属性.但是,路总是人走出来的嘛(哈哈哈哈),在文章后面会给大家说说怎么兼容IE的! 测试代码: <a href="imges/1.jpg" download=&q…

HTML5 <a>标签download 属性

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

了解HTML/HTML5中的download属性

一.download属性是个什么鬼? 首先看下面这种截图: 如果我们想实现点击上面的下载按钮下载一张图片,你会如何实现? 我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片,类似下面这样: 1 <a href="large.jpg">下载</a> 但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击下面的"下载"链接,并是不下载图片,而是在新窗口直接浏览图片. 下载看我的眼睛, 于是,基本…

html/html5中的download属性

兼容性不是很好, 只是了解一下: 主要表现在跨域策略的处理上,Chrome浏览器和FireFox浏览器: 如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名:而FireFox浏览器下,则download属性是无效的,也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载. 而,如果资源是同域名的,则两个浏览器都是畅通无阻的下载,不会出现下载变浏览的情况. demo <a href="l…

如何用 JavaScript 下载文件

简介我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好. 幸好,HTML 5 里面为 <a> 标签添加了一个 download 的属性,我们可以轻易的利用它来实现下载功能,再也不需要用以前的笨办法了. 原理我们先看看 download 的使用方法: <a href="http://somehost/somefile.zip" download=&qu…

js实现前端下载文件

在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3)将上述的文件地址指向a标签的href,并设置a标签的download属性为要保存成的文件名. (4)点击a标签,即可下载对应的文件. //下载文件 _download:function (filename,content){ var blob = new Blob([content], {type…

vue中使用axios下载文件，兼容IE11

一.设置axios返回值为blob 二.使用a标签的down属性下载,如果是IE浏览器,可以使用navigator.msSaveBlob进行下载 // data的数据类型是blob downloadFiles (data) { if (!data) { return } const uA = window.navigator.userAgent const isIE = /msie\s|trident\/|edge\//i.test(uA) && !!('uniqueID' in docu…

.net下载文件的方法

最近做项目遇到文件下载的问题,原本采用的是直接用一个href链接到需要下载的文件来处理这个问题,后来发现,如果文件是一个图片,浏览器会自动打开图片而不是下载,需要用户右击另存为才可以下载,很不友好,后来上网找了一个a标签的download属性,经测试,谷歌浏览器支持下载,但是IE并不支持这个属性,懒得去做那些兼容的操作了,在后台写了一个下载的方法,直接前台调用就OK asp.net的下载方法 /// <summary> ///字符流下载方法 /// </summary> /// &…

Asp.Net Web Api 2 实现多文件打包并下载文件示例源码_转

一篇关于Asp.Net Web Api下载文件的文章,之前我也写过类似的文章,请见:<ASP.NET(C#) Web Api通过文件流下载文件到本地实例>本文以这篇文章的基础,提供了ByteArrayContent的下载以及在下载多个文件时实现在服务器对多文件进行压缩打包后下载的功能.关于本文中实现的在服务器端用.NET压缩打包文件功能的过程中,使用到了一个第方类库:DotNetZip,具体的使用将在正文中涉及.好了,描述了这么多前言,下面我们进入本文示例的正文. 一.创建项目 1.1 首先创…

Afinal加载网络图片及下载文件使用方法

Afinal快速开发框架使用起来非常方便,下面将讲解如何利用Afinal加载网络图片及下载文件: 先看效果图: 注意:使用Afinal前需添加Afinal的jar,可以在这里下载:http://download.csdn.net/detail/baiyuliang2013/7313587 其中包括了Afinal的源码和jar,使用时只需添加jar包即可,在学习阶段也可以直接添加源码到你的项目中,可以更深入的学习Afinal. 看代码: activit_main.xml: <RelativeLay…

Jmeter之下载文件

前言我们可以利用postman工具来测试下载文件的接口,那么假如要利用Jmeter工具来进行下载接口的测试,又该如何测试呢? 下载文件的接口地址:/pinter/file/api/download?id={下载文件序号}:请求类型为get 一:添加下载http请求,填入接口地址,添加察看结果树二:添加监听器-保存响应到文件,写入下载文件的存放路径和文件名三.该接口运行后,可以到存放下载文件的路径找到下载的文件,若下载的文件是文本文件,在响应结果还会显示文本内容.…

nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤（linux系统下）

nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤(linux系统下),安装Nginx和HttpAccessKeyModule模块(参考LNMP环境搭建:第一步:在/usr/local/src/下下载模块压缩包: wget http://wiki.nginx.org/images/5/51/Nginx-accesskey-2.0.3.tar.gz (下载) tar zxvf Nginx-accesskey-2.0.3.tar.gz …

php上传下载文件

之前做一个上传下载的项目,发现网上的和自己需求不是很一样,翻阅了下书籍和整理了下网上的一些代码.做了一个上传下载的demo,上传通过php本身的uploadfile函数,并返回以时间戳命名的文件名后,把文件名插入到数据库:下载则是把文件输出给浏览器,让浏览器来执行下载过程.不同版本php语法可能不同,另外代码可能会有冗余的地方,如果有错误的地方或者有可以改进的地方,请不吝赐教. 下面附上代码: upload.php(上传文件代码)注意要建upload(指定上传目录)文件夹 <?php requi…

使用a标签下载文件，而不是直接打开，使用属性 download

有的时候,下载的链接文件如果是普通文件类型,如txt,我们下载文件的时候,有的浏览器不会弹出下载框,.而是直接打开了该文件. 针对这种情况,我们只需要在a标签上加上download属性即可显示下载框. download属性可以不填值,他默认就是下载链接的文件,也可以自己填上文件名. html如下: <a href="../download/file/${fileInfoBean.fileUrl}" download target="_blank">下载文…

jQuery动态添加li标签并添加属性和绑定事件

代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q…

火狐 a 标签 download 属性，要在 a 标签添加到页面中才生效；

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