如果想通过纯前端技术实现文件下载,直接把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>
 

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

  1. vue+iview 通过a标签实现文件下载

    vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...

  2. A标签实现文件下载功能

    <a>可直接下载xls,doc,rar,zip,exe,js文件(图片跟txt文件是直接打开的) <a href="wKioJlJolKeCIzkCADd3Wf7OPI42 ...

  3. ajax处理文件下载

    ajax中处理文件下载,可能大数会遇到我和一样的问题,什么问题呢?就是下载程序执行了,但是浏览器没有任何下载操作,这是为什么呢? 那是因为response原因,一般请求浏览器是会处理服务器输出的res ...

  4. 第18天 ajax技术和javascript加强(json)

    第18天    ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...

  5. 关于Ajax无法下载文件到浏览器本地的问题

    最近在做网站的时候遇到这样一个功能,在如图所示的页面中,需要用户点击链接的时候,能够以异步Ajax的方式判断服务器中是否存储有相应的Excel文件,如果没有的话就提示用户没有找到,如果有的话就下载到用 ...

  6. 语音识别(ASR) 阿里云

    做语音识别这块的呢,国内领先的有科大讯飞,BAT这几家公司,鉴于使用科大讯飞的接口需要付费,腾讯云的语音识别申请了几天也没给通过,比较了一下阿里和百度的,个人觉得阿里云的好用一些,这篇博客来讲讲怎么讲 ...

  7. 使用JavaScript下载csv文件

    前端可以使用JavaScript在客户端下载包含页面数据的文件,这里以下载CSV格式文件为例,代码如下: function downloadData(data, filename, type) { v ...

  8. vue学习中遇到的问题

    1.axios使用post传值时无法使用键值对传值的问题 问题的原因:主要是HTTP请求中的get请求和post请求参数的存放位置是不一样的,get请求的参数以键值对的方式跟在url后面的,而post ...

  9. ajax请求无法下载文件的原因

    原因: Ajax下载文件的这种方式本来就是禁止的.出于安全因素的考虑,javascript是不能够保存文件到本地的, 所以ajax考虑到了这点,只是接受json,text,html,xml格式的返回值 ...

随机推荐

  1. 【转】JDBC学习笔记(10)——调用函数&存储过程

    转自:http://www.cnblogs.com/ysw-go/ 如何使用JDBC调用存储在数据库中的函数或存储过程: * 1.通过COnnection对象的prepareCall()方法创建一个C ...

  2. js日期转化(计算一周的日期)

    之前做项目的时候遇到过一个日期转化的问题,一个日期控件和近一天,近七天和近一月的的联动效果.发现自己不会,后来就百度了一下解决了这个问题. 现在抽空又写了一个时间转化的案例(计算一周的日期),因为之前 ...

  3. 为何PS出的RSS总和大于实际物理内存

    使用ps  aux  查看系统进程时,第六列即 RSS列显示的就是进程使用的物理内存. 可是把系统所有进程的该列相加时,得到的总和又远远高于系统实际的物理内存?这到底是怎么回事呢? 看一看linux是 ...

  4. [进程管理]Linux进程状态解析之T、Z、X

             Linux进程状态:T (TASK_STOPPED or TASK_TRACED),暂停状态或跟踪状态.          向进程发送一个SIGSTOP信号,它就会因响应该信号而进入 ...

  5. 使用PhpIniDir加载php配置文件出错,不能解析。

    我也是在apache服务器上配置php,在加载了php的配置文件之后,就出问题了. PHPIniDir "H:/php54/"增加了类似这句话之后,服务器就启动不了了,或者.php ...

  6. sql关键字之null

    在数据库中使用一种特殊的值表示未知的值--NULL,我们称之为空值但并不是空的字符串,而是特殊的值.

  7. sdkman安装

    软件开发工具管理包(Software Development Kit Manager,简称SDKMAN) 用来管理多个版本的开发环境的工具.提供命令行来安装.切换.删除.列出候选版本. 官网地址:ht ...

  8. VMware安装CentOS 6.7系统

    VMware安装CentOS 6.7系统 1. 安装前的准备 a) VMware虚拟机软件 b) CentOS 6.7镜像 c) Windows电脑一台 2. 开始安装 a) 打开VMware软件 b ...

  9. O(nlogn)实现LCS与LIS

    序: LIS与LCS分别是求一个序列的最长不下降序列序列与两个序列的最长公共子序列. 朴素法都可以以O(n^2)实现. LCS借助LIS实现O(nlogn)的复杂度,而LIS则是通过二分搜索将复杂度从 ...

  10. 产品经理学Python:条件控制

    条件控制其实就是if...else...(如果...条件是成立的,就做...:反之,就做...)的使用,其基本结构是: 具体看下面这个例子: def account_login(): # 定义函数 p ...