如果想通过纯前端技术实现文件下载,直接把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. MySQL 事务与锁机制

    下表展示了本人安装的MariaDB(10.1.19,MySQL的分支)所支持的所有存储引擎概况,其中支持事务的有InnoDB.SEQUENCE,另外InnoDB还支持XA事务,MyISAM不支持事务. ...

  2. SELECT中(非常)常用的子查询操作

    MySQL中的子查询 是在MySQL中经常使用到的一个操作,不仅仅是用在DQL语句中,在DDL语句.DML语句中也都会常用到子查询. 子查询的定义: 子查询是将一个查询语句嵌套在另一个查询语句中: 在 ...

  3. curl_escape ---> 使用URL 编码给定的字符串

    curl_escape (PHP 5 >= 5.5.0) curl_escape — 使用 URL 编码给定的字符串 说明¶ string curl_escape ( resource $ch  ...

  4. macOS 下配置 MAMP 开发环境(Mac + Apache + Mysql + PHP)

    macOS 中已经内置了 PHP.Python.Ruby.Perl 等常用的脚本语言,以及 Apache HTTP 服务器,所以使用起来非常方便.本文以最新的 macOS Sierra 10.12 配 ...

  5. jQuery图片上传前先在本地预览(不经过后端处理)

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  6. JavaScript面向对象的理解

    JavaScript面向对象的理解  笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...

  7. JavaScript知识点整理(一)

    JavaScript知识点(一)包括 数据类型.表达式和运算符.语句.对象.数组. 一.数据类型 1) js中6种数据类型:弱类型特性 5种原始类型:number(数字).string(字符串).bo ...

  8. java实现二叉树的构建以及3种遍历方法

    转载自http://ocaicai.iteye.com/blog/1047397 大二下学期学习数据结构的时候用C介绍过二叉树,但是当时热衷于java就没有怎么鸟二叉树,但是对二叉树的构建及遍历一直耿 ...

  9. Nginx安装lua支持

    Nginx安装lua支持 需要LuaJIT-2.0.4.tar.gz,ngx_devel_kit,lua-nginx-module 1.下载安装LuaJIT-2.0.4.tar.gz wget -c ...

  10. 关于TOE(TCP/IP Offload Engine)

    前言 昨天在电脑上抓取的报文,想进行回话,但是发现全部被设备丢弃了,没有debug信息,查看了抓包文件,原来是IP头和TCP.UDP头的检验和全部为0,也就是TOE(TCP/IP Offload En ...