最近在做异步导出的功能,导出的过程中前端另外启动一个查询导出进度的线程接口。如果导出完成后,把生成的文件上传到服务器,返回给前端一个文件的下载地址;前端自动打开这个地址进行跳转下载。

有两种方式

1.直接使用js自带的方式打开链接

  这种方式有一个问题,会被浏览器自动拦截弹出的窗口:”已阻止弹出窗口“,导致用户下载文件失败,会认为程序报错。可以用方案2

window.open(url)

2.用代码创建一个隐藏的a标签

  用代码创建一个隐藏的a标签,把下载地址赋值给a标签的href属性,然后用js模拟鼠标点击进行下载文件。

            const link = document.createElement('a');
link.href = url;
link.download = 'file.xls';
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

vue 前端自动打开文件地址进行下载的更多相关文章

  1. Vue方式自动打开浏览器配置

    Vue方式自动打开浏览器配置 1. 通过 package.json 配置项目 // 必须是符合规范的json语法 "vue": { "devServer": { ...

  2. vue无法自动打开浏览器

    原文链接: 点我 如果不能自动打开浏览器,是因为没有安装插件. 插件安装的方法1.安装插件,在cmd中输入: $ npm i open-browser-webpack-plugin --save这里的 ...

  3. 将不确定变成确定~Uri文本文件不用浏览器自动打开,而是下载到本地

    回到目录 这个标题有点长,简单来说就是,对于一个文件下载来说,是否可以提示用户,让它去保存,而不是将它在浏览器中打开,在浏览器中打开有个致命问题,那就是,如果你的页面编码和文件的编码不一致时,打开的就 ...

  4. 微信中扫描二维码自动打开手机系统默认浏览器下载APP(APK)

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 功能目的 生成微信跳转链接,实现微信内置浏览 ...

  5. 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP

    不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器都会被屏蔽.这是微信对第三方下载域名实施的拦截政策.被拦截了用户在微信内打开就会提示“已停止访问该网页”. 那么当我们遇到这个 ...

  6. 【Azure 环境】存储在Azure上的文件,使用IE/Edge时自动打开的问题,如何变为下载而非自动打开

    问题描述 存储,作为云服务最重要的一部分.当需要从云存储中下载文件时,时常面临一些格式的文件被浏览器自动打开而非下载,那如何来解决这个问题呢? 在Azure中,存储的服务有以下方式: Azure Bl ...

  7. 微信不支持App下载的解决方案 微信跳转打开外部浏览器下载(苹果跳转商店下载)

    在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...

  8. 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法

    想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1.网页链接被举报次数 ...

  9. vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!

    vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...

  10. vue 使用 npm run dev命令后 自动打开浏览器

    1.使用vue-cli 老版本构建项目时, 可修改config文件夹下index.js文件 autoOpenBrowser 属性给为 true 即可 使用vue-cli 3.x 版本后,所有的配置项均 ...

随机推荐

  1. [转帖]CPU的制造和概念

    https://plantegg.github.io/2021/06/01/CPU%E7%9A%84%E5%88%B6%E9%80%A0%E5%92%8C%E6%A6%82%E5%BF%B5/ 为了让 ...

  2. 公司内部Oracle RAC测试环境的简单使用说明.

    1. 公司内部要测试Oracle RAC系统的创建与测试工作. 因为Oracle RAC 主要需要 多个网段以及共享存储, 直接使用ESXi搭建比较复杂 所以我这边使用vagrant的方式搭建Orac ...

  3. PG数据库恢复简单记录

    公司同事给了一个很小的数据 我这边进行备份和恢复操作 第一步 创建数据库 su - postgres #进入pg数据库的用户 psql #输入密码 登录 create user demo with p ...

  4. echarts api的介绍

    参考的地址:https://echarts.apache.org/zh/api.html echarts.init echarts.init(dom?: HTMLDivElement|HTMLCanv ...

  5. 超级好用的elementui动态循环菜单

    <template> <div> <el-menu @select="selectMenu" :default-active="curren ...

  6. 【解决了一个小问题】terraform apply 的时候出现访问 localhost 出错

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 有这样一段 terraform 的部署脚本: provid ...

  7. IConfigurationSectionHandler 接口的用法

    今天终于花了点时间了解一下IConfigurationSectionHandler 接口的用法 ,引以入门.首先建立一 RobsunConfigSectionHandler 专案,代码如下 : nam ...

  8. Fabric升级示例

    Fabric v1.4.x升级至v2.2.0 本文首发于这里,转载请注明出处. 以fabric-samples v1.4.8为例,将v1.4.8升级至v2.2.0.注意,所有节点以滚动的方式进行升级, ...

  9. ABP 领域服务层学习记录

    在ABP框架中有一个约定,所有的领域服务都应该继承并实现IDomainService接口,在领域层Core创建某一个实体的领域服务类,继承并实现IDomainService接口.在ABP框架中,领域服 ...

  10. Django后台输出原生SQL语句

    如果需要打印orm翻译后的原生sql语句,只需要在setting最后加上下面代码就行. 1 LOGGING = { 2 'version': 1, 3 'disable_existing_logger ...