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

有两种方式

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. [转帖]Linux中./configure、make、make install命令详解

    简单来说,make 是编译,make install 是安装.   总结:linux编译安装中configure.make和make install各自的作用  • ./configure是用来检测你 ...

  2. vue/cli的配置详解

    查看vue/cli的配置 vue的脚手架隐藏了所有的webpack相关的配置,若是想要查看webpack的配置 你可以去执行 vue inspect > output.js 这样就可以查看它的配 ...

  3. 【小测试】golang中数组边界检查的开销大约是1.87%~3.12%

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 对比C/C++, golang等类型安全的语言会在数组访问 ...

  4. word 常用设置

    目录 目录 关闭 Word 句首字母自动大写功能 1 Word 生成目录 1 Word 快速调整标题级别 1 Word 关闭句首字母自动大写功能 参考:https://zhuanlan.zhihu.c ...

  5. 【主流技术】实战之 Spring Boot 中集成微信支付(小程序)

    前言 微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的. 以下是经过真实商业项目实践的集成步骤,包括注册流程.调用过程.代码demo(经过脱敏)等,希望我的分享 ...

  6. 找工作、备考、面试刷题网站推荐(牛客网、力扣、计蒜客、hihocoder、七月在线)以及acm竞赛oj

    不管是找工作笔试面试白板试进大厂,还是研究生参加初试复试,数据结构和算法都是都是重中之重,刷题就很必要,来拿走自己的offer 吧! 一.offer刷题推荐 1.牛客网 链接:牛客网 - 找工作神器| ...

  7. C++ Boost 内存池与智能指针

    Pool内存池: 只能开辟常规内存,数据类型为int,float,double,string等. #include <iostream> #include <boost/pool/p ...

  8. 有用的工具类(Java)

    IP地址获取 public class IPUtil { private static final String UNKNOWN = "unknown"; protected IP ...

  9. python使用selenium控制已打开的Chrome浏览器

    环境 Python3.11 selenium 4.9.0 Chrome 112.0.5615.138 步骤 为了便于和平常用的Chrome浏览区分,可以先创建一个专门用于开发的Chrome浏览器, 添 ...

  10. iOS视频播放常用重点知识

    iOS视频播放常见的重要知识点如下: 视频格式:iOS支持的视频格式主要有H.264.MPEG-4.H.263.Sorenson等.它们根据不同的应用场景进行使用. 视频编解码:视频编解码技术是视频播 ...