Vue中下载不同文件的几种方式

当在Vue中需要实现文件下载功能时,我们可以有多种方式来完成。下面将介绍五种常用的方法。

1. 使用window.open方法下载文件
<template><div><button @click="downloadFile('file1.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template><script>
export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/' + fileName; // 文件的URL地址window.open(fileUrl);}}
};
</script>

在上面的示例中,我们使用了window.open方法来打开一个新窗口,并直接访问文件的URL地址,从而触发文件下载。

2. 使用<a>标签进行文件下载
<template><div><button @click="downloadFile('file1.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template><script>
export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/' + fileName; // 文件的URL地址const link = document.createElement('a');link.href = fileUrl;link.setAttribute('download', fileName);link.click();}}
};
</script>

在上面的示例中,我们首先创建一个<a>标签,然后设置其href属性为文件的URL地址,download属性为要下载的文件名。最后,通过调用click()方法触发链接的点击事件,实现文件的下载。

3. 使用axios下载文件
<template><div><button @click="downloadFile('file1.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template><script>
import axios from 'axios';export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/' + fileName; // 文件的URL地址axios.get(fileUrl, { responseType: 'blob' }).then(response => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();}).catch(error => {console.error(error);});}}
};
</script>

在上面的示例中,我们使用了axios发送GET请求,设置responseTypeblob以便获取文件的二进制数据。然后,通过创建临时URL、创建<a>标签并设置下载属性,实现文件的下载。

4. 使用Fetch API下载文件
<template><div><button @click="downloadFile('file1.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template><script>
export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/' + fileName; // 文件的URL地址fetch(fileUrl).then(response => response.blob()).then(blob => {const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();}).catch(error => {console.error(error);});}}
};
</script>

在上面的示例中,我们使用了Fetch API发送GET请求,并使用.blob()方法将返回的数据转换为blob对象。然后,通过创建临时URL、创建<a>标签并设置下载属性,实现文件的下载。

5. 使用Vue的$download方法下载文件
<template><div><button @click="downloadFile('file1.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template><script>
export default {methods: {downloadFile(fileName) {const fileUrl = '/path/to/' + fileName; // 文件的URL地址this.$download(fileUrl, fileName);}}
};
</script>

在这个示例中,我们直接调用Vue实例的$download方法,并传入文件的URL地址和下载的文件名,即可实现文件的下载。

6. 使用创建a标签方法下载文件
<template><div><button @click="downloadFile('file1.pdf')">下载文件1</button><button @click="downloadFile('file2.jpg')">下载文件2</button></div>
</template><script>
export default {methods: {downloadFile(fileName) {const folderPath = '/path/to/folder/'; // 文件所在的文件夹路径const fileUrl = folderPath + fileName; // 拼接文件夹路径和文件名const link = document.createElement('a');link.href = fileUrl;link.setAttribute('download', fileName);link.click();}}
};
</script>

在这个示例中,我们首先定义了文件所在的文件夹路径folderPath,然后通过拼接文件夹路径和文件名来构建完整的文件URL地址fileUrl。接着,我们创建一个<a>标签,并设置其href属性为文件URL,download属性为要下载的文件名。最后,通过调用click()方法触发链接的点击事件,实现文件的下载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/194062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Cloud Alibaba简介

1、简介 Spring Cloud阿里(https://sca.aliyun.com/en-us/)为分布式应用开发提供一站式解决方案。它包含开发分布式应用程序所需的所有组件&#xff0c;使您可以轻松地使用Spring Cloud开发应用程序。 有了Spring Cloud阿里&#xff0c;你只需要添加一些注释和少量的配置&#…

vue2框架简易版响应式设计(观察者模式)

对于vue.js中的属性值我们要格外关注&#xff1a; $attrs 获取当前传递的参数 $listeners 获取当前组件的自定义事件 $children 获取当前组件所有子组件 $parent 获取当前组件所有父组件 $options 获取当前vue实例参数信息 $refs 获取ref所有的引用节点 设计原则&#x…

day4 节点两两交换

ListNode* swapPairs(ListNode* head) { ListNode* dummyHead new ListNode(0); // 设置一个虚拟头结点 dummyHead->next head; // 将虚拟头结点指向head&#xff0c;这样方便后面做删除操作 ListNode* cur dummyHead; while(cur->next ! nullptr && cur->…

编译原理头歌实验:实验4《算符优先分析法设计与实现》(C语言版)

任务描述 本关任务&#xff1a;加深对语法分析器工作过程的理解&#xff1b;加强对算符优先分析法实现语法分析程序的掌握&#xff1b;能够采用一种编程语言实现简单的语法分析程序&#xff1b;能够使用自己编写的分析程序对简单的程序段进行语法翻译。 相关知识 为了完成本…

【大连民族大学C语言CG题库练习题】——猪的安家问题

【问题描述】 Andy和Mary养了很多猪。他们想要给猪安家。但是Andy没有足够的猪圈&#xff0c;很多猪只能够在一个猪圈安家。举个例子&#xff0c;假如有16头猪&#xff0c;Andy建了3个猪圈&#xff0c;为了保证公平&#xff0c;剩下1头猪就没有地方安家了。Mary生气了&#xf…

(一)WtBtRunner回测大体流程

WtBtRunner是回测的主程序&#xff0c;启动改程序时&#xff0c;会进行配置文件和dll的加载 解析参数&#xff0c;由cppcli::Option完成参数解析初始化日志打印 std::string filename;if (lParam->exists())filename lParam->get<std::string>();elsefilename …

Java集合(已重写-废弃了)

# 精辟总结 其实各种八股文资料&#xff0c;他也就是围绕着核心知识展开提问的&#xff0c;你只要根据八股文把核心知识提炼出来&#xff0c;形成核心知识体系&#xff01; Java集合那是重点中的重点。最基本的概念要懂&#xff0c;核心的概念&#xff0c;那要滚瓜烂熟。 Ja…

【recrutment / Hiring / Job / Application】

Interviewee I), objected/targeted job/position1.1) Azure 平台运维工程师&#xff08;comms&social&#xff09;1.1.1), comms communication and social, for talk, content1.1.2) Cloud computing1.1.3) 拥有ITI/MCSE/RHCE相关认证或Azure认证(如Az204/Az304 have/own…

【计算机视觉】基于OpenCV计算机视觉的摄像头测距技术设计与实现

基于计算机视觉的摄像头测距技术 文章目录 基于计算机视觉的摄像头测距技术导读引入技术实现原理技术实现细节Python-opencv实现方案获取目标轮廓步骤 1&#xff1a;图像处理步骤 2&#xff1a;找到轮廓步骤完整代码 计算图像距离前置技术背景与原理步骤 1&#xff1a;定义距离…

[传智杯 #3 决赛] 面试

题目背景 disangan233 和 disangan333 去面试了&#xff0c;面试官给了一个问题&#xff0c;热心的你能帮帮他们吗&#xff1f; 题目描述 现在有 n 个服务器&#xff0c;服务器 i 最多能处理 ai​ 大小的数据。 接下来会有 k 条指令 bk​&#xff0c;指令 i 表示发送 bi​ …

海德汉(HEIDENHAIN)CNC数据采集(可免授权)

一&#xff0c;概述 海德汉 常见的系统一般有530、640系统&#xff0c;采集一般有两种方法&#xff1a; &#xff08;1&#xff09;购买海德汉官方的SDK&#xff0c;HeidenhainDNC COM Component&#xff0c;安装之后有相应的demo&#xff0c;支持的语言有C#、C/C。此方法还需…

面试篇之微服务(二)

目录 服务容灾 21.什么是服务雪崩&#xff1f; 22.什么是服务熔断&#xff1f;什么是服务降级&#xff1f; 什么是服务熔断&#xff1f; 什么是服务降级&#xff1f; 有哪些熔断降级方案实现&#xff1f; 23.Hystrix怎么实现服务容错&#xff1f; 24.Sentinel怎么实现限…

JSP格式化标签 parseDate将指定时间格式字符串转为真正的date对象

格式化标签最后一个就是 parseDate 作用 将一个日期/时间格式字符串 转为 真正的date时间类型 有点无语 这种 东西应该都是在java中去做的 而不是在java中 这个建议也是做个了解即可 作用不是那么大 基本语法如下 这里 我们 直接编写代码如下 <% page contentType"…

【限时免费】20天拿下华为OD笔试之【哈希集合】2023B-明明的随机数【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述&#xff1a;示例 1输入输出说明 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 明明生成了N 个 1 至 500 之间的随机整数。请你删去其中重复的数字&#xff0c;即…

JSP格式化标签 parseNumber指定格式字符串转数字类型

好 我们继续来说格式化标签 parseNumber 它的作用是讲一个字符串 转换为指定格式的数值型 老实说 这东西 作为了解把 实际开发中都不是用得少 我建议还是在java端就处理好 不建议在jsp中高这种类型转换的操作 基本格式如下 这几个属性都是我们这几期jsp标签的老朋友了 我们…

【STM32】STM32学习笔记-新建工程(04)

00. 目录 文章目录 00. 目录01. 创建STM32工程02. STM32工程编译和下载03. LED测试04. 型号分类及缩写05. 工程结构06. 附录 01. 创建STM32工程 【STM32】STM32F103C8T6 创建工程模版详解(固件库) 02. STM32工程编译和下载 2.1 选择下载器位ST-Link Debugger 2.2 勾选上电…

基于Spring、SpringMVC、MyBatis的企业博客网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis的企业博…

python 3.11 运行 timm 0.6.12无法import

python3.11 安装了 timm 0.6.12 后&#xff0c;在import timm时报错&#xff1a; ValueError: mutable default <class timm.models.maxxvit.MaxxVitConvCfg> for field conv_cfg is not allowed: use default_factory 在hugging face官方的issue中给出了解决方案&…

认识成交量VOL,搞懂量价关系

一、认识成交量VOL 1、成交量VOL的含义 VOL是一个成交量指标&#xff0c;是指个股或者大盘一定时间内的成交数量&#xff0c;一般的炒股软件中都是指成交总手数&#xff08;1手100股&#xff09;。 成交量体现在炒股软件上就是一根竖着的柱子&#xff0c;成交量越大&#xff0c…

Redis常见类型

常用类型String字符串类型Hash字典类型List列表类型Set集合类型ZSet有序集合类型 Java程序操作Redis代码操作Redis 常用类型 String字符串类型 使用方式&#xff1a; 使用场景&#xff1a; Hash字典类型 字典类型(Hash) 又被成为散列类型或者是哈希表类型&#xff0c;它…