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 版本后,所有的配置项均 ...
随机推荐
- [转帖]45个处理字符串的Python方法
https://baijiahao.baidu.com/s?id=1738413163267646541&wfr=spider&for=pc 一.题目解析 先来看一个题目: 判断用 ...
- [转帖]shell删除文件前几行或后几行
https://www.cnblogs.com/1394htw/p/14852207.html shell删除文件前几行或后几行 #!/bin/bash #删除前两行 sed -i '1,2d' fi ...
- 【OpenAI】ChatGPT函数调用(Function Calling)实践
6月13日OpenAI在Chat Completions API中添加了新的函数调用(Function Calling)能力,帮助开发者通过API方式实现类似于ChatGPT插件的数据交互能力. 本文 ...
- js中forEach的用法、forEach如何跳出循环、forEach与for之间的区别
定义和用法 forEach() 调用数组的每个元素,并将元素传递给回调函数. 注意: forEach() 对于空数组是不会执行回调函数的. 用法: array.forEach(function(cur ...
- Vue3中ref和toRef的区别
1. ref是复制,视图会更新 如果利用ref将某一个对象中的某一个属性值变成响应式数据 我们修改响应式数据是不会影响原始数据的; 同时视图会跟新. ref就是复制 复制是不会影响原始数据的 < ...
- 【windows Server 2019系列】 构建IIS服务器
个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying Web服务器也称为WWW(World Wide W ...
- vim 从嫌弃到依赖(22)——自动补全
这篇文章我们将讨论 vim 自带的自动补全功能.当然,针对自动补全功能有许多好用的插件,但是了解vim自带的功能有助于我们更好的用来插件的补全功能.因为我见过有的配置文件将插件的功能配置的比原有的更难 ...
- 小白学k8s(11)-k8s中Secret理解
理解Secret 什么是Secret Secret的类型 Opaque Secret Opaque Secret的使用 将Secret挂载到Volume中 挂载的Secret会被自动更新 将Secre ...
- 【3】超级详细matplotlib使用教程,手把手教你画图!(多个图、刻度、标签、图例等)
相关文章: 全网最详细超长python学习笔记.14章节知识点很全面十分详细,快速入门,只用看这一篇你就学会了! [1]windows系统如何安装后缀是whl的python库 [2]超级详细Pytho ...
- 5.3 Windows驱动开发:内核取应用层模块基址
在上一篇文章<内核取ntoskrnl模块基地址>中我们通过调用内核API函数获取到了内核进程ntoskrnl.exe的基址,当在某些场景中,我们不仅需要得到内核的基地址,也需要得到特定进程 ...