vue 前端自动打开文件地址进行下载
最近在做异步导出的功能,导出的过程中前端另外启动一个查询导出进度的线程接口。如果导出完成后,把生成的文件上传到服务器,返回给前端一个文件的下载地址;前端自动打开这个地址进行跳转下载。
有两种方式
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 前端自动打开文件地址进行下载的更多相关文章
- Vue方式自动打开浏览器配置
Vue方式自动打开浏览器配置 1. 通过 package.json 配置项目 // 必须是符合规范的json语法 "vue": { "devServer": { ...
- vue无法自动打开浏览器
原文链接: 点我 如果不能自动打开浏览器,是因为没有安装插件. 插件安装的方法1.安装插件,在cmd中输入: $ npm i open-browser-webpack-plugin --save这里的 ...
- 将不确定变成确定~Uri文本文件不用浏览器自动打开,而是下载到本地
回到目录 这个标题有点长,简单来说就是,对于一个文件下载来说,是否可以提示用户,让它去保存,而不是将它在浏览器中打开,在浏览器中打开有个致命问题,那就是,如果你的页面编码和文件的编码不一致时,打开的就 ...
- 微信中扫描二维码自动打开手机系统默认浏览器下载APP(APK)
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 功能目的 生成微信跳转链接,实现微信内置浏览 ...
- 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器都会被屏蔽.这是微信对第三方下载域名实施的拦截政策.被拦截了用户在微信内打开就会提示“已停止访问该网页”. 那么当我们遇到这个 ...
- 【Azure 环境】存储在Azure上的文件,使用IE/Edge时自动打开的问题,如何变为下载而非自动打开
问题描述 存储,作为云服务最重要的一部分.当需要从云存储中下载文件时,时常面临一些格式的文件被浏览器自动打开而非下载,那如何来解决这个问题呢? 在Azure中,存储的服务有以下方式: Azure Bl ...
- 微信不支持App下载的解决方案 微信跳转打开外部浏览器下载(苹果跳转商店下载)
在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...
- 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法
想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1.网页链接被举报次数 ...
- vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!
vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...
- vue 使用 npm run dev命令后 自动打开浏览器
1.使用vue-cli 老版本构建项目时, 可修改config文件夹下index.js文件 autoOpenBrowser 属性给为 true 即可 使用vue-cli 3.x 版本后,所有的配置项均 ...
随机推荐
- [转帖] Linux命令拾遗-入门篇
https://www.cnblogs.com/codelogs/p/16060394.html 原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 之前出过很多和 ...
- grafana与K8S的下载地址
https://grafana.com/grafana/download/9.1.6 https://dl.k8s.io/v1.15.1/kubernetes-node-linux-amd64.tar ...
- Oracle 查看所有表大小的SQL
Oracle 查看所有表大小的SQL 比较坑的是 lob 字段和 表的大小不在一个地方 为了出结果 我这边使用了 union all 慢的一逼... SELECT sum( tablesize ), ...
- ARC150D - Removing Gacha (树上期望)
Link 题意: 给一棵 \(n\) 个节点的树,称一个点是好的,当且仅当它到根的路径上都是黑色(包括自己).每次在不好的节点中随机选一个把它涂成黑色(不管原来它是否是白的),直到所有点都是好的为止. ...
- 任意文件下载包含https的图片
使用a标签进行下载 <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ. ...
- 文字溢出hover展示
我这个后端返回的是html结构,不然不用加v-html,需要依赖element Ui 的文字提示 <el-tooltip placement="top"> <p ...
- 多路io复用Select [补档-2023-07-16]
select 2.1 简介 select函数可以用于实现高效的多路复用 I/O,同时处理多个文件描述符的事件,包括监听可读.可写和异常条件,具有阻塞和非阻塞模式,并可以设置超时时间.这使得程序能够 ...
- DevToys(开发工具) v1.0.2.1
从事开发工作的朋友们千万不要错过了!今天为大家带来的这款软件可以说是开发人员的必备工具,它就是DevToys软件!DevToys中包含了许多强大实用的开发工具,能够帮助用户将程序开发变得更加简单大大降 ...
- 解决Python报错SSLError,如果试了网上一大堆方法还不行,看看这个吧!!
前言 这个问题困扰了群友一天,我怀着好奇心去试试看,不到5分钟给解决了哈哈. 报错代码 报错代码中对相关的host和url进行了替换,大家在网上发布内容也要注意隐私哈,多长个心眼子总没错. reque ...
- 《ASP.NET Core 微服务实战》-- 读书笔记(第7章)
第 7 章 开发 ASP.NET Core Web 应用 ASP.NET Core 基础 在本章,我们将从一个命令行应用开始,并且在不借助任何模板,脚手架和向导的情况下,最终得到一个功能完整的 Web ...