【vue项目中点击下载】弹窗提示:离开此网站?系统可能不会保存您所做的更改,改为直接下载,不提示此弹窗内容,已解决

本文介绍了如何在Web项目中通过window.location.href和两种方法(a标签的download属性和XMLHttpRequest创建Blob对象)避免浏览器下载确认对话框,实现在新窗口直接下载文件,同时确保浏览器的安全特性。
摘要由CSDN通过智能技术生成

项目中用的是window.location.href实现下载

在Web浏览器中,当尝试通过window.location.href重定向到一个文件下载URL时,浏览器通常会显示一个确认对话框,询问用户是否要离开当前页面,因为下载的文件通常是在新窗口或新标签页中打开的。这是浏览器的内置安全特性,用于防止用户无意中离开当前页面并丢失未保存的数据

downLoad(file) {
  window.location.href = `${process.env.VUE_APP_BASE_API}/common/download/resource?fileName=${file.fileName}`
}

然后就出现类似这样的弹窗提示

在这里插入图片描述

如果要直接开始下载,有两种写法,实现思路是一样的,创建a连接,设置download属性

downLoad(file) {
   //  使用<a>标签并设置download属性
     const link = document.createElement('a')
      link.href = `${process.env.VUE_APP_BASE_API}/common/download/resource?fileName=${file.fileName}`
      link.download = file.fileName // 设置download属性
      link.target = '_blank'//根据情况选择是否需要
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
}
downLoad(file) {
      //使用XMLHttpReques,创建一个Blob对象并使用URL.createObjectURL来创建一个可以下载的链接
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `${process.env.VUE_APP_BASE_API}/common/download/resource?fileName=${file.fileName}`, true);
        xhr.responseType = 'blob';
        xhr.onload = function () {
       if (this.status === 200) {
        const blob = this.response;
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = file.fileName;
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url); // 释放URL对象
        document.body.removeChild(link);
    }
  };
       xhr.send();
       }

实测两种都可以
在这里插入图片描述

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值