首页 > 其他分享 >vue 前端自动打开文件地址进行下载

vue 前端自动打开文件地址进行下载

时间:2023-12-15 16:23:31浏览次数:24  
标签:文件 vue 前端 地址 link document 下载

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

有两种方式

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,前端,地址,link,document,下载
From: https://www.cnblogs.com/dawenyang/p/17903599.html

相关文章

  • vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:<inputv-on:keyup.13="submit">vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode~~上面代码,还可以在这样写:<inputv-on:keyup.enter="submit"><[email protected]="submit">全部的键盘别名:.enter.tab......
  • 【面试必备】Vue 3 常见问题全解析,让你轻松过关!
    谈谈你对Vue的理解?为什么使用Vue进行开发?根据官方说法,Vue是一套用于构建用户界面的渐进式框架。Vue的设计受到了MVVM的启发。Vue的两个核心是数据驱动和组件系统。我为什么使用Vue,有以下几个原因:Vue对于前端初学者比较友好。一个Vue文件的结构和原生HTML保持了高度......
  • vue---操作状态
    VUE更改VUEX状态:简单示例代码:importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);exportdefaultnewVuex.Store({state:{count:0},mutations:{increment(state){state.count++;},d......
  • vue3Cron表达式组件
    npm安装no-vue3-cron引入报错,就直接把代码拿来自己改了no-vue3-cron仓库地址:https://github.com/wuchuanpeng/no-vue3-cronvue-cron.vue<stylelang="scss">.no-vue3-cron-div{.language{position:absolute;right:25px;z-index:1;}.el-tabs{......
  • docker-项目部署-前端
    3.2.部署前端hmall-portal和hmall-admin是前端代码,需要基于nginx部署。在课前资料中已经给大家提供了nginx的部署目录:其中:html是静态资源目录,我们需要把hmall-portal以及hmall-admin都复制进去nginx.conf是nginx的配置文件,主要是完成对html下的两个静态资源目录做代理......
  • Ant Design Vue <a-tabs>标签内嵌使用
    <a-tabs :activeKey="activeKey" @change="handleTabChange">        <a-tab-pane v-for="(item, index) in menuList" :key="item.id" :tab="item.name" :index="index">          <div>......
  • 网上搜集的香港DNS服务器IP地址列表
    1.香港宽频HongKongBroadBandNetworkDNS203.80.96.10203.80.96.9 2.HKNet宽频DNS202.67.240.222202.67.240.221 3.和记环球电话DNS202.45.84.58202.45.84.59 4.网线前线202.81.252.1202.81.252.2 5太平洋超网202.14.67.4202.14.67.14 6.网络快车......
  • vue2子组件拷贝父组件传递的参数
    在Vue2中,父组件向子组件传递参数时,如果参数是对象或数组(即非基本数据类型),那么子组件可以直接修改这个参数,这会影响到父组件的数据。如果你想避免这种情况,你可以让子组件对父组件的传参进行深度拷贝。这样,子组件就可以自由修改拷贝后的参数,而不会影响到父组件的数据。这是一个例......
  • vue3.0项目搭建
    一、安装vue3脚手架卸载vue2脚手架npmuninstall-gvue-cli清除缓存npmcacheclen--force安装最新脚手架npminstall-g@vue/cli查看脚手架版本vue-V二、构建项目创建项目vuecreate项目名选择配置自定义配置,回车上下键选择Linter/......
  • Vue入门
    一、vue官网:https://cn.vuejs.org/index.html1.1Vue的简单概述1.1.1、介绍:Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的......