精华内容
下载资源
问答
  • a标签download属性

    2020-08-03 10:16:48
    a标签download属性不起作用 ** 首先要明白的是,download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,如果填写指就会更改你的下载名称,比如: <a href="/images/a....

    **

    a标签download属性不起作用

    **
    首先要明白的是,download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,如果填写指就会更改你的下载名称,比如:

    <a href="/images/a.exe" download>点击下载</a>
    

    上面这段代码会下载a.exe,并采用默认命名

    <a href="/images/a.exe" download="b">点击下载</a>
    

    这段代码会将a.exe改名为b.exe下载

    需要注意的是,href属性的地址必须是和你前端js非跨域的地址,如果引用的是第三方的网站或者说是前后端分离的项目,调用后台的接口,这时download就会不起作用。

    在这种情况下如果你是下载浏览器无法解析的文件,例如.exe,.xlsx…那么浏览器也会自动下载,但是如果你使用浏览器可以解析的文件,比如.txt,.png…浏览器就会采取预览模式,所以无论如何你都无法直接弹出下载框。如下图所示:

    <a href="https://www.baidu.com/a.jpg" download>点击下载</a>
    

    无法正常下载a.jpg,会直接预览

    <a href="https://www.baidu.com/a.exe" download>点击下载</a>
    

    正常下载a.exe文件

    所以如果真的出现上述情况,那么只有一种办法,提示用户进行手动的右键保存。

    提供一种解决方案:给a标签增加点击事件

    JS代码如下:

     //下载文件
    	function downloadFile(filenamerel) {
    		var $downForm = $("<form method='get'></form>");
    		$downForm.attr("action", "后台地址");
    		var $input = $("<input type='hidden'>");
    		$input.attr("name","filenamerel");
    		$input.val(filenamerel);
    		$downForm.append($input);
    		$(document.body).append($downForm);
    		//提交表单,实现下载
    		$downForm.submit();
    	}
    
    展开全文
  • a标签download属性不起作用

    万次阅读 热门讨论 2019-01-18 17:05:11
    a标签download属性不起作用 首先要明白的是,download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,如果填写指就会更改你的下载名称,比如: <a href="/images/a....

    a标签download属性不起作用

    首先要明白的是,download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,如果填写指就会更改你的下载名称,比如:

    <a href="/images/a.exe" download>点击下载</a>

    上面这段代码会下载a.exe,并采用默认命名

    <a href="/images/a.exe" download="b">点击下载</a>

    这段代码会将a.exe改名为b.exe下载

    需要注意的是,href属性的地址必须是和你前端js非跨域的地址,如果引用的是第三方的网站或者说是前后端分离的项目,调用后台的接口,这时download就会不起作用。

    在这种情况下如果你是下载浏览器无法解析的文件,例如.exe,.xlsx..那么浏览器也会自动下载,但是如果你使用浏览器可以解析的文件,比如.txt,.png....浏览器就会采取预览模式,所以无论如何你都无法直接弹出下载框。如下图所示:

    <a href="https://www.baidu.com/a.jpg" download>点击下载</a>

    无法正常下载a.jpg,会直接预览

    <a href="https://www.baidu.com/a.exe" download>点击下载</a>

    正常下载a.exe文件

    所以如果真的出现上述情况,那么只有一种办法,提示用户进行手动的右键保存。

     

    提供一种解决方案:给a标签增加点击事件

    JS代码如下:

        //下载文件
    	function downloadFile(filenamerel) {
    		var $downForm = $("<form method='get'></form>");
    		$downForm.attr("action", "后台地址");
    		var $input = $("<input type='hidden'>");
    		$input.attr("name","filenamerel");
    		$input.val(filenamerel);
    		$downForm.append($input);
    		$(document.body).append($downForm);
    		//提交表单,实现下载
    		$downForm.submit();
    	}

    后台代码实现如下:

        @RequestMapping(value = "路径", method = RequestMethod.GET)
        public void downloadEdiFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
            String filenamerel = request.getParameter("filenamerel");
            String fileName = request.getParameter("filename");
            //获取文件保存地址
            String filePath = 文件基础路径 + filenamerel;
            //读取文件
            InputStream txtIn = new FileInputStream(new File(filePath));
            OutputStream os = response.getOutputStream();
            String userAgent = request.getHeader("user-agent").toLowerCase();
            if (userAgent.contains("msie") || userAgent.contains("like gecko")) {
                // win10 ie edge 浏览器 和其他系统的ie
                fileName = URLEncoder.encode(fileName, "UTF-8");
            } else {
                // 文件名转码
                fileName = new String(fileName.getBytes("UTF-8"), "iso-8859-1");
            }
            response.setContentType("application/octet-stream; charset=UTF-8");
            response.setHeader("Content-Disposition", "attachment; filename=" + fileName);// @TODO 下载的文件名称
            //文件缓存区
            byte[] bytes = new byte[1024];
            //判断输入流中的数据是否已经读完的标致
            int len = 0;
            while ((len = txtIn.read(bytes)) > 0) {
                os.write(bytes, 0, len);
            }
            if (os!=null){
                os.close();
            }
            if (txtIn!=null){
                txtIn.close();
            }
        }

    完成如上阶段即可实现点击下载,如果要重命名,在todo处更改名称即可,也可以从前台传递过来。

    ps:如果解决了您的问题请帮忙点赞关注一下哦~

    感谢 琨璟 指正的错误

     

    如果是网络文件利用下面的方法进行

    感谢 weixin_42313833 提出的疑问

    // 读取文件
    InputStream txtIn = new FileInputStream(new File(filePath));
    
    =》 将上述代码更改为下面的代码
    
    // 从网络读取文件
    URL url = new URL(filePath);
    URLConnection conn = url.openConnection();
    
    InputStream txtIn = conn.getInputStream();
    
     
    展开全文
  • a标签download属性修改文件名

    千次阅读 2020-01-16 14:57:20
    静态文件下载时,可通过downloads属性修改文件名,如下所述: ...注意事项:a标签download属性只支持谷歌和火狐浏览器,不支持IE(IE不支持html5 新特性a标签download属性)。同时访问的域名与a标签内href的域...

    静态文件下载时,可通过downloads属性修改文件名,如下所述:

    <a href="'+fileUrl+'" download="'+fileName+'">   fileName为下载文件要修改的名字

     

     

    注意事项:a标签download属性只支持谷歌和火狐浏览器,不支持IE(IE不支持html5 新特性a标签download属性)。同时访问的域名与a标签内href的域名需要一致

     


     

    展开全文
  • a标签download属性修改文件名失效

    万次阅读 2018-10-17 16:08:43
    &lt;a href="'+fileurl+'" download="'+filename+'"&gt; fileName为下载文件要修改的名字 ...在谷歌和火狐浏览器a标签download属性修改文件名失效是因为网络原因:注意访...

    <a href="'+fileurl+'" download="'+filename+'">   fileName为下载文件要修改的名字

    注意:a标签download属性只支持谷歌和火狐浏览器,不支持IE,在IE环境下图片和txt文档是预览效果

    IE不支持html5 新特性a标签download属性

    在谷歌和火狐浏览器a标签download属性修改文件名失效是因为网络原因:注意访问于域名和href的域名要一致,如下图

    可以动态拼接要下载的文件路径: var baseUrl ='http://'+window.location.host+'/';    fileurl=baseUrl+imgurl

    eg:外网:http://easytest1.com:9060/

           内网: http://easytest2.com:9060/

     

    展开全文
  • a标签 download base64 下载 网络失败

    千次阅读 2019-02-02 21:45:00
    使用html2canvas 生成尺寸较大 base64 后进行 a标签 download 下载 ,浏览器报网络失败错误 通过谷歌搜索 发现原因是 因为截取尺寸较大 导致生成base64 长度太大 ,达到了a标签的href 上限,所以报错下载失败,...
  • js获取a标签download弹出另存为对话框的路径。。。。。
  • html中a标签download属性使用方法和介绍使用实例定义和用法语法浏览器支持 使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>奇葩天地网(qipa250.com)</...
  • html a标签 download

    千次阅读 2018-12-06 11:11:30
    通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href; &lt;a href="/user/test/xxxx.txt...
  • a标签的用法:a标签主要有href,target,download,rel=noopener四个属性,主要有跳转外部页面,跳转内部锚点和跳转到邮箱或电话等作用download:下载网页href:后面添加网址href的取值1.网址:推荐使用第三种方式,...
  • a 标签 download 属性不起作用,或者下载的图片无法查看 问题描述 downloada 标签 html5 的新属性,可以点击下载文件,初次使用,经常会出现无法点击的情况,可能有以下原因,排除下: 解决方案 必须设置 ...
  • 在火狐中,button内嵌套a标签,button 会覆盖标签,无法触发a标签的点击事件,所有无法下载,并不是火狐不支持a标签download问题,在w3c上明确写明火狐是支持的。 解决方法: 方法一: 将外层button去...
  • 解决a标签download属性无效问题

    万次阅读 2019-05-21 12:01:50
    起初遇到这个问题是因为在QQ浏览器中,a链接无法下载浏览器插件(.crx文件),既没有弹出下载窗口,在下载记录里面也找不到下载文件,后面就给a标签添加了这个download属性。 download属性的作用是强制弹出下载窗口,...
  • html5 a标签支持download属性修改下载的文件名。 js: var a = $(#a_id).href("download/url"); a.download = "rename.xml"; a.click(); html: 存在的问题: 直接点击下载文件名还是默认的,只有在右键连接...
  • Html a标签 download属性失效原因

    万次阅读 2018-09-27 09:19:21
    a&gt; 标签的新属性。 因此,download 是属于HTML5的新属性,失效原因分析如下:   1、没有声明html5,需要再html文件头声明&lt;!DOCTYPE html&gt; &lt;!DOCTYPE&gt; 声明必须是 HTML 文档...
  • 在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可,var aLink = document.createElement('a'); aLink.href = canvas.toDataURL(); aLink.download = 'spirite.png...
  • 插件可以使用 标签 或者 标签添加在页面上.这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。使用 元素embed>标签定义外部(非 HTML)内容的容器。(这是一个 ...
  • 发现一个奇怪的事,看代码<a id="downloadAlink" target="_blank" href=...理论上,有 download 、target 、href ,在这里点击应该是新开标签下载 href 里东西,然而实际上失败的,也就是说,target 本身的作...
  • 问题描述:前段时间一直想使用前端的a标签实现文件下载,使用的a标签download属性就能实现。可是FTP服务器的图片还是一直只能预览无法直接下载。 #使用的地址是直接使用的IP端口的,原因就出在这里:当请求...
  • 1、标签用于插入图片。它是单独使用的,没有闭合标签。<img src="foo.jpg">上面代码在网页插入一张图片foo.jpg。src属性指定图片的网址,上例是相对 URL,表示图片与网页在同一个目录。默认是一个行内元素,与...
  • a标签download属性可以更改下载文件的文件名。但是如果是跨域的话,download属性就会失效。 解决方案: <a click="downloadFile(fileUrl,fileName)">下载文件</a> function downloadFile(url, ...
  • var element = document.createElement('a'); // 属性一 设置字符集并且转码 // 属性二 添加download按钮 element.setAttribute('href', 'data:text/xml;charset=utf-8,' + encodeURIComponent(text)); element....
  • 1. 非vue项目:一般情况下我们习惯把本地文件放在当前...方法一:依然用a标签 <el-button> <a href="../../../static/解决vue上传数据模板.xlsx" download>下载</a> </el-button> ..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,180
精华内容 472
关键字:

a标签download