a标签实现文件下载

如果想通过纯前端技术实现文件下载,直接把a标签的href属性设置为文件路径即可,如下:

<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf">download</a>

但是,对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载,而是会直接打开,这时候一个新属性就要上场了--【download】

<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf" download="test.pdf">download</a>

download属性不止可以实现下载,其属性值还可以规定下载时的文件名,如果不填写,会自动使用默认文件名。

很遗憾,兼容性不佳,本人实际测试结果也同上图一致。但是,虽然不兼容,但不代表完全不支持,IE 和 Safari 不会直接下载,但是会有下载提示框弹出,只是多绕了一步而已。如果不想借助后台而要实现文件下载,给a标签加download绝对是首选之策。

另外,我们还可以通过js判断浏览器的兼容性去选择性给用户一些提示信息。

<script>
    var supportDownload = "download" in document.createElement("a");
    if(!supportDownload){
//        code...
    }
</script>
时间: 2024-08-08 09:37:20

a标签实现文件下载的相关文章

滚动标签 压缩文件下载 与超链接的优化写法

以ajax请求方式进行文件下载操作失败的原因及解决方案

一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序. 二.解决方案 1)可以使用jquery创建表单并提交实现文件下载: var form = $("<form>"); form.

文件下载之断点续传(客户端与服务端的实现)

原文:http://www.cnblogs.com/zhaopei/p/download.html 阅读目录 文件下载-服务端 使用a标签提供文件下载 使用Response.TransmitFile提供文件下载 其他方式文件下载 文件下载-客户端 直接下载 异步下载 断点续传 断点续传(服务端的支持) 多线程同时下载(分片下载) 前面讲了文件的上传,今天来聊聊文件的下载. 老规矩,还是从最简单粗暴的开始.那么多简单算简单?多粗暴算粗暴?我告诉你可以不写一句代码,你信吗?直接把一个文件往IIS服务

【转】文件下载之断点续传(客户端与服务端的实现)

[转]文件下载之断点续传(客户端与服务端的实现) [转]文件下载之断点续传(客户端与服务端的实现) 前面讲了文件的上传,今天来聊聊文件的下载. 老规矩,还是从最简单粗暴的开始.那么多简单算简单?多粗暴算粗暴?我告诉你可以不写一句代码,你信吗?直接把一个文件往IIS服务器上一扔,就支持下载.还TM么可以断点续传(IIS服务端默认支持). 在贴代码之前先来了解下什么是断点续传(这里说的是下载断点续传)?怎么实现的断点续传?断点续传就是下载了一半断网或者暂停了,然后可以接着下载.不用从头开始下载. 很

提取行政区边界经纬度坐标(高德+百度)

前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配. 主要问题和解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Goog

使用JavaScript下载csv文件

前端可以使用JavaScript在客户端下载包含页面数据的文件,这里以下载CSV格式文件为例,代码如下: function downloadData(data, filename, type) { var file = new Blob(["\ufeff" + data], { type: type }); if (window.navigator.msSaveOrOpenBlob) // IE10+ window.navigator.msSaveOrOpenBlob(file, fi

实现点击下载文件的几种方法

标签:文件下载,技巧 在实现点击下载文件有多种方法: 后端设置header信息 通过后端告诉浏览器header信息实现下载: header('Content-type: image/jpeg'); header("Content-Disposition: attachment; filename='download.jpg'");  局限: 需要后端配合. 直接跳转到目标文件的地址 使用window.open()或者location.href或者直接使用<a>标签将页面跳转

通过 &lt;a&gt;标签实现ftp文件下载功能

环境: ftp登录用户名 ftp登录密码 ftp文件路径 一般处理程序 下面是我通过网上查找的资料实现的一个例子 首先页面中的a 标签拼接路径带需要的参数 <a class="downST" href="../ashx/Folder.ashx?strPath=ftp://[ftp ip地址]/PLM/File/标准ztree数据.txt&FileName=标准ztree数据.txt">下载</a> 下面是处理程序代码 public v

PHP实现文件下载

PHP实现文件下载 PHP下载文件 js下载文件 项目操作中不可避免要提供文件的下载,有时候要写一些逻辑判断或者提示啥,那下载的方法就需要做些调整.做个下载文件的集锦: readfile — 输出文件 (手册上有说明:读入一个文件并写入到输出缓冲.) <?php $file = 'monkey.gif' ; if ( file_exists ( $file )) { header ( 'Content-Description: File Transfer' ); header ( 'Conten