JS下载链接的两种方式

1、window.open()

弹出新窗口下载,需要用户进行交互之后触发,否则会被拦截,Safari始终会拦截弹窗

2、a标签下载

   不会触发弹窗,更安全

let a = document.createElement('a')
a.href = '下载链接';
a.download = '文件名称';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

3、直接JS读取文件流

此方式适用于无法直接获得下载链接,后端直接返回文件流的情况

axios.get(durl,{ responseType: 'blob' }).then(rstream => {
    let name = '文件名';
    let b = new Blob([rstream.data]);
    let URL = window.URL ? window.URL : window.webkitURL;
    let url = URL.createObjectURL(b);
    let link = document.createElement('a');
    link.href = url;
    link.download = name;
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(url)
    document.body.removeChild(link)
}).catch(e=>{
    console.log(e);
    alert('下载失败!请重试!')
})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在前端应用中,路由是一个非常重要的概念,它决定了应用的不同页面之间的跳转和展示。在路由之间传递数据是非常常见的需求,一般有以下两种方式: 1. URL参数传值 URL 参数传值是最常见的一种传值方式,它的原理是将数据以 URL 参数的形式传递给下一个路由。例如,在一个商品列表页面中,你可以通过点击某个商品的链接,传递该商品的 id 给商品详情页。代码示例: ```javascript // 列表页 const productId = 123; router.push(`/product/${productId}`); // 详情页 const productId = this.$route.params.id; ``` 在列表页中,我们将商品的 id 作为参数传递给详情页的路由,详情页可以通过 `$route.params` 获取该参数。 2. 状态管理器传值 状态管理器传值是另一种传值方式,它的原理是将数据存储在一个全局的状态管理器中,不同的页面之间可以通过该状态管理器共享数据。例如,在一个购物车页面中,你可以将购物车中的商品列表存储在状态管理器中,然后在结算页面中读取该列表。代码示例: ```javascript // 存储数据 store.commit('setCartList', cartList); // 读取数据 const cartList = store.state.cartList; ``` 在上面的代码中,我们使用 Vuex 状态管理器存储了购物车商品列表,然后在其他页面中可以通过 `store.state` 读取该列表。需要注意的是,使用状态管理器传值需要安装和配置相应的状态管理库,如 Vuex。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值