a标签实现文件流下载

简介: a标签实现文件流下载

a标签实现文件流下载

方法1:

<a href="地址">download</a>

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

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

<a href="地址" download="test.pdf">download</a>

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

方法2:

const oa = document.createElement('a');
oa.href = url;
oa.setAttribute('target', '_blank');
document.body.appendChild(oa);
oa.click();
document.body.removeChild(oa);

方法3:

const parm = '\u003cscript\u003elocation.replace("' + url + '")\u003c/script\u003e';
const str = 'javascript:window.name;'
window.open(str, parm);
目录
相关文章
|
存储 JavaScript 前端开发
oss使用SDK上传文件
oss使用SDK上传文件
3745 2
|
JavaScript 前端开发 容器
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
2313 0
|
7月前
|
安全 PHP 开发者
PHP 8 新特性:Match表达式,让代码更简洁
PHP 8 新特性:Match表达式,让代码更简洁
|
前端开发
前端:下载文件(多种方法)
前端:下载文件(多种方法)
1719 0
|
存储 缓存 移动开发
uinapp的setStorageSync和setStorage的区别
uinapp的setStorageSync和setStorage的区别
1633 56
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4849 7
|
JavaScript 前端开发
js小数运算出现的问题(精度丢失)及解决办法-亲测有效
JavaScript浮点数运算存在精度丢失问题,如0.1+0.2不等于0.3。原因是十进制小数转二进制时可能出现无限循环,导致舍入误差。本文提供一种精度处理方法,通过将小数转为整数运算后再还原,实现加减乘除的精确计算,解决常见浮点运算误差问题。
1558 0
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
3027 0
|
小程序 Android开发 iOS开发
微信小程序-虚拟支付:适用场景 / iPhone调试用支付成功,Android调用失败,提示“小程序支付能力已被限制” / “errMsg“.“requestPayment:fail banned”
微信小程序-虚拟支付:适用场景 / iPhone调试用支付成功,Android调用失败,提示“小程序支付能力已被限制” / “errMsg“.“requestPayment:fail banned”
3058 0
|
JavaScript 前端开发 数据安全/隐私保护
npm账户需要登录问题npm error probably out of date. To correct this please try logging in again with优雅草央千澈解决方案
npm账户需要登录问题npm error probably out of date. To correct this please try logging in again with优雅草央千澈解决方案
2792 0
npm账户需要登录问题npm error probably out of date. To correct this please try logging in again with优雅草央千澈解决方案

热门文章

最新文章