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

有两种方式

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. Redis IO多线程的简要测试结果

    Redis IO多线程的简要测试结果 摘要 最近想简单确认一下IO多线程的对吞吐量的提升情况. 正好手头有鲲鹏的机器, 所以想直接进行一下验证 顺便用一下4216 进行一下对比. 发现 在CPU核心比 ...

  2. Redis 菜鸟进阶

    Redis 菜鸟进阶 背景 最近产品一直要优化性能,加强高可用. 有一个课题是Redis高可用与性能调优. 我这边其实获取到的内容很有限. 最近济南疫情严重,自己锁骨骨折. 然后通勤时间基本上都用来查 ...

  3. Stable Diffusion WebUI Model 加载个人笔记

    参考1:https://www.bilibili.com/read/cv20039815 参考2:https://blog.cmyr.ltd/archives/e740aac.html 服务器:阿里云 ...

  4. Gorm 应用开发时区问题与unique唯一索引字段数据冲突问题

    目录 一.定义表模型时区问题 1.1 time.Time 与int64 1.2 优势 二.unique唯一索引字段数据冲突问题 一.定义表模型时区问题 1.1 time.Time 与int64 一般情 ...

  5. 【Java 进阶】详细探究 Spring 框架中的注解与反射

    [进阶]Spring中的注解与反射 目录 [进阶]Spring中的注解与反射 前言 一.内置(常用)注解 1.1@Overrode 1.2@RequestMapping 1.3@RequestBody ...

  6. SqlSugar的Select用法

    Select 位置 正常情况:应该在最后面, 一般是 .Where(..).OrderBy(..).Select(..).ToList() 特殊情况:如果Select不是最后一个位置,则Select要 ...

  7. 解锁搜索新境界!让文本语义匹配助你轻松找到你需要的一切!(快速上手baseline)

    解锁搜索新境界!让文本语义匹配助你轻松找到你需要的一切!(快速上手baseline) 实现了多种相似度计算.匹配搜索算法,支持文本.图像,python3开发,pip安装,开箱即用. 文本相似度计算(文 ...

  8. 基于中文金融知识的 LLaMA 系微调模型的智能问答系统:LLaMA大模型训练微调推理等详细教学

    基于中文金融知识的 LLaMA 系微调模型的智能问答系统:LLaMA大模型训练微调推理等详细教学 基于 LLaMA 系基模型经过中文金融知识指令精调/指令微调(Instruct-tuning) 的微调 ...

  9. python读取json格式文件大量数据,以及python字典和列表嵌套用法详解

    1.Python读取JSON报错:JSONDecodeError:Extra data:line 2 column 1 错误原因: JSON数据中数据存在多行,在读取数据时,不能够单单用open(), ...

  10. 2.13 PE结构:实现PE代码段加密

    代码加密功能的实现原理,首先通过创建一个新的.hack区段,并对该区段进行初始化,接着我们向此区段内写入一段具有动态解密功能的ShellCode汇编指令集,并将程序入口地址修正为ShellCode地址 ...