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);
目录
相关文章
|
前端开发
前端接受后端文件流并下载到本地的方法
前端接受后端文件流并下载到本地的方法
3209 0
uni-app uni-file-picker 上传组件实战应用
uni-app uni-file-picker 上传组件实战应用
|
JavaScript 前端开发 容器
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
2190 0
|
前端开发
前端:下载文件(多种方法)
前端:下载文件(多种方法)
1622 0
|
存储 缓存 移动开发
uinapp的setStorageSync和setStorage的区别
uinapp的setStorageSync和setStorage的区别
1392 56
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
1222 159
|
前端开发 JavaScript API
Howler.js:音频处理的轻量级解决方案
Howler.js:音频处理的轻量级解决方案
2164 0
|
资源调度 JavaScript 前端开发
vue2_二次封装a-upload组件,自定义上传预览
vue2_二次封装a-upload组件,自定义上传预览
1504 0
|
JavaScript
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
1052 0
|
小程序 Android开发 iOS开发
微信小程序-虚拟支付:适用场景 / iPhone调试用支付成功,Android调用失败,提示“小程序支付能力已被限制” / “errMsg“.“requestPayment:fail banned”
微信小程序-虚拟支付:适用场景 / iPhone调试用支付成功,Android调用失败,提示“小程序支付能力已被限制” / “errMsg“.“requestPayment:fail banned”
1953 0

热门文章

最新文章