如果想通过纯前端技术实现文件下载,直接把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. android widget 开发实例 : 桌面便签程序的实现具体解释和源代码 (上)

    如有错漏请不吝拍砖指正,转载请注明出处,很感谢 桌面便签软件是android上经常使用软件的一种,比方比較早的Sticky Note,就曾很流行, Sticky Note的介绍能够參见 http:// ...

  2. 锤子便签的 monkeyrunner 测试脚本(转)

    https://testerhome.com/topics/878 MonkeyRunner可能大家已经听过无数次了,大家在网上也看过了各种关于的它的资料了,我这里就不再过多的啰嗦它的用途了,它可以对 ...

  3. 魅族便签,是否能成为国内便签应用的No.1?

    继前不久锤子科技推出便签 Android 新版后,近期魅族在PRO 6公布会上也公布了最新的魅族便签应用.这一次魅族把便签应用拓展到了整个Android体系,也就是说.其它不论什么的Android手机 ...

  4. CSS3+JS 实现的便签应用

    概述 利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...

  5. Android我的便签-----SQLite的使用方法

    在Android开发中也有数据库的存在,最近有空,把以前写的一个便签来讲述一下Android中的数据库,跟大家分享分享的,希望对大家有所帮助. SQLite简介 SQLite,是一款轻量级的关系型数据 ...

  6. 使用electron+vue开发一个跨平台todolist(便签)桌面应用

    # 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...

  7. Android自动化测试 - MonkeyRunner(二) 锤子便签测试脚本

    来源于:http://testerhome.com/topics/878 # encoding=utf-8 #导入python中自带的time模块和sys模块,脚本中都要用到它们. import ti ...

  8. 20151217JS便签

    JS便签: 根据一个数值来改变Repeater行数的颜色 <script type="text/javascript"> var query = document.ge ...

  9. win7桌面便签。自带的

    新建WIN7下的桌面便签小程序 桌面—>新建 快捷方式-> 输入%windir%\system32\StikyNot.exe

随机推荐

  1. kbmmw 的远程桌面功能2-android手机端

    前面讲了PC 端的远程操作,今天讲一下如何用手机控制远程桌面(真的能操作的很爽吗?), 要使手机可以远程控制,首先在在kbmmwconfig.inc 文件里面加入FMX 支持 {$DEFINE KBM ...

  2. 2018.12.17 ural1132 Square Root(二次剩余)

    传送门 MD写一道二次剩余的板题差点写自闭了. 我用的是cipollacipollacipolla算法. 利用的是欧拉准则来找寻一个二次非剩余类来求根. 注意这题有两个等根和模数为2的情况. 代码: ...

  3. 查看mysql数据库中的所有用户

    SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user; @前面为用户名,后面对应的‘% ...

  4. 修改oralce数据库用户名和密码

    首先以sys用户登录数据库 一.修改用户名 查到到所需修改用户名称的用户需要:select user#,name from user$;(例如查到有一个normal的用户对应的user#=61) 修改 ...

  5. C++STL 算法

    算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中最大的一个,其 ...

  6. Altera PLL应用中注意的问题

    无论是差分转单端信号还是单端信号转差分信号,都要都要用到altiobuf.而且在pin planner中要设置管脚的标准为差分的 而且要注意管脚的正负极性. 今天用FPGA做测试:把专门用于PLL的输 ...

  7. docker 搭建 MYSQL并且完成主从复制

    mysql主从复制逻辑: 1.从库执行start slave 开启主从复制. 2.从库请求连接到主库,并且指定binlog文件以及位置后发出请求. 3.主库收到从库请求后,将信息返回给从库,除了信息日 ...

  8. 为什么要重写hashCode()方法和equals()方法及如何重写

    我想写的问题有三个: 1.首先我们为什么需要重写hashCode()方法和equals()方法 2.在什么情况下需要重写hashCode()方法和equals()方法 3.如何重写这两个方法 **** ...

  9. 屏幕抓取程序 (位图DDB的例子)

    屏幕抓取程序的意思是将整个屏幕图显示在应用程序的用户区中,等价于截图.对桌面窗口的操作:首先得知道桌面窗口的宽和高,获取宽和高需要利用窗口的设备句柄,而获取设备句柄需要知道窗口句柄,这一系列的连串关系 ...

  10. android-基础编程-Preference

    由于SDK封装和提供了一套基于Preference的类,使用Preference通过编辑xml配置文件,只要很少的代码就可以实现了,而且Preference本身已经实现了参数保存,不需要我们再考虑将参 ...