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 版本后,所有的配置项均 ...
随机推荐
- [转帖]xargs详解
https://www.cnblogs.com/xiaofeng666/p/10800939.html xargs与find经常结合来进行文件操作,平时删日志的时候只是习惯的去删除,比如 # find ...
- 据说这道Go面试题90%的人都搞错了!
[Go面试向]defer与time.sleep初探 大家好,我是阳哥,这是我们Go就业训练营小伙伴 寸铁同学 整理的一道很有意思的面试题. 知其然更要知其所以然,通过断点调试的思路带你搞清楚来龙去脉. ...
- 三十分钟入门基础Go(Java小子版)
作者:京东科技 韩国凯 前言 Go语言定义 Go(又称 Golang)是 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态.强类型.编 ...
- vuex标准化看这篇文章就够了~
1.新建一个store文件夹,新建index.js文件,内容如下: import Vue from 'vue' import Vuex from 'vuex' import state from '. ...
- slices in Go 1.21
Go 1.21中新增的 slices包中提供了很多与切片相关的函数,适用于任意类型的切片. 本文内容来自官方文档 BinarySearch 函数签名如下: func BinarySearch[S ~[ ...
- 使用TimeSpan 日期与时间拼接
TimeSpan 含有以下四个构造函数: TimeSpan(Int64)将 TimeSpan结构的新实例初始化为指定的刻度数. (DateTime.Tick:是计算机的一个计时周期,单位是一百纳秒,即 ...
- 强化学习从基础到进阶-案例与实践[1]:强化学习概述、序列决策、动作空间定义、策略价值函数、探索与利用、Gym强化学习实验
强化学习从基础到进阶-案例与实践[1]:强化学习概述.序列决策.动作空间定义.策略价值函数.探索与利用.Gym强化学习实验 1.1 强化学习概述 强化学习(reinforcement learning ...
- tensorflow语法【shape、tf.trainable_variables()、Optimizer.minimize()】
相关文章: [一]tensorflow安装.常用python镜像源.tensorflow 深度学习强化学习教学 [二]tensorflow调试报错.tensorflow 深度学习强化学习教学 [三]t ...
- 4.5 C++ Boost 文件目录操作库
Boost 库是一个由C/C++语言的开发者创建并更新维护的开源类库,其提供了许多功能强大的程序库和工具,用于开发高质量.可移植.高效的C应用程序.Boost库可以作为标准C库的后备,通常被称为准标准 ...
- Python 开发代码片段笔记
作者编写的一些代码片段,本版本为残废删减版,没有加入多线程,也没有实现任何有价值的功能,只是一个临时记事本,记录下本人编写代码的一些思路,有价值的完整版就不发出来了,自己组织吧,代码没啥技术含量,毕竟 ...