vue文件下载及重命名

article/2025/4/25 16:22:47

本文所讲的下载地址格式为:地址+文件名(例如:http...+ 'test.docx')

页面代码: 

<!--map为所下载的文件信息,包括文件名、路径等 -->
<p v-down="map">这是文件名</p>    

js代码: (在main.js中写入以下代码)  

注:方法一 前端不需要考虑跨域问题,后台设置允许就行

       方法二 单独设置文件名无效,默认下载文件名为上传服务器后所返回的地址里的命名(一般会为uuid的格式,非文件原名),若大家有解决方法可以留言给博主

let baseDownloadUrl = "http://192.xxx.x.xxx:8090/"; // 域名+端口号
// 添加自定义v-down指令
Vue.directive("down", {inserted: (el, binding) => {el.style.cssText = "cursor: pointer;";el.addEventListener("click", () => {//方法一var xz = new XMLHttpRequest();xz.open("GET", baseDownloadUrl + binding.value.path, true);xz.responseType = "blob";xz.onload = function (e) {var url = window.URL.createObjectURL(xz.response);var a = document.createElement("a");a.href = url;a.download = binding.value.fileName;a.click();};x.send();//方法二// let link = document.createElement("a"); // 创建a标签// link.style.display = "none";// link.href = baseDownloadUrl + binding.value.path; // 设置下载地址// link.setAttribute("download", binding.value.fileName); // 添加downLoad属性// link.setAttribute("target", "_blank");// document.body.appendChild(link);// link.click();});},
});

 

 


http://chatgpt.dhexx.cn/article/CGQvxwxo.shtml

相关文章

使用npm下载vue-router(vuex)路由报错,“export ‘XXXX‘ was not found in ‘vue‘

vue-router vuex 报错同理 vue-router vuex 报错同理 今天在写vue项目使用cnpm下载路由&#xff0c;然后就报错"export ref was not found in vue 原因&#xff1a;cnpm install vue-router --save 现在默认下载的是4.x的版本 &#xff0c;我是用的是…

vue实现文件下载

vue中文件下载 前言 Vue浏览器文件下载最简单的方法就是用a链接实现&#xff0c;然后加一个download属性。让后端返回[blob]文件格式&#xff0c;需要传递 responseType: ‘blob’ 一、使用步骤 展示文件&#xff0c;文件点击后查看方法为handlePreview <span style&qu…

vue学习之一:下载vue-cli项目

这几周一直辗转在vue官网和各大博客搜索关于vue项目实战的例子。学的实在是零零碎碎的。不过总算在对于vue项目搭建有个基本认知&#xff0c;于是直接拿起以前做过的项目进行改版了&#xff0c;接下来是从怎么搭建vue2.xvue-router项目实战写的一些列文章。我的开发环境都是基于…

下载vue脚手架@vue/cli(详解)

1.首先到官网下载node.js 2.在自己的电脑查看是否下载成功 使用window加r输入cmd使用node -v 查看node.js是否下载成功 3.使用npm下载yarn 注意&#xff1a;因为下载node.js中会自动帮你下载npm&#xff0c; npm install -g yarn 使用yarn -v 如果显示有版本号则下载成功…

vue.js中文官网下载vue.js失败了?

访问vue官网 https://v2.cn.vuejs.org/v2/guide/installation.html下载vue.js&#xff0c;页面直接报错404&#xff0c;只需要切换到英文版&#xff0c;重新下载即可成功。 或者直接访问以下地址: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Includ…

如何下载vue.js

vue官网&#xff1a;https://v2.vuejs.org/ 1、第一步 2、第二步 3、 第三步

idea 下载vue 插件

1.先查看自己的idea 的版本 2.然后去官网 https://plugins.jetbrains.com/plugin/9442-vue-js/versions 下载跟自己idea 版本对应的vue插件 一定要对应不然 报版本不对应问题 类似于&#xff1a; 下载完之后 把文件放在 相应位置 我是放在了idea的插件位置 一般是在 idea的…

Vue.js的下载和调用

Vue支持双向绑定&#xff0c;非常不错。将视图层和模型层分离开。是基于MVVM模型&#xff0c;模型-视图-视图模型 。支持ES6。 目录 一、在官网下载vue.js文件 二、声明Vue对象 三、Vue修饰符 1. v-once。 使{{}}内的值不能被修改 2.v-pre 。{{}}将不会被Vue替换&#xff0c…

操作系统课后答案第三章

**操作系统课后答案**第三章 处理及调度与死锁 1、高级调度与低级调度的主要任务是什么? 为什么要引入中级调度? 答&#xff1a;高级调度的主要任务&#xff1a;用于决定把外存上处于后背队列中的哪些作业调入内存&#xff0c;并为它们创建进程&#xff0c;分配必要的资源&am…

第1章 操作系统引论课后答案

第1章 操作系统引论 1.1 简答题参考答案 1&#xff0e;在计算机系统上配置 OS&#xff08;operating system&#xff0c;操作系统&#xff09;的目标是什么&#xff1f;作用主 要表现在哪几个方面&#xff1f; 【参考答案】在计算机系统上配置OS&#xff0c;主要目标是实现&a…

操作系统解答题

操作系统 **1.平均等待时间问题****2.同步互斥问题****3.分页系统地址转换****4.LRU&#xff08;最近最久未使用&#xff09;置换算法**5.银行家算法 1.平均等待时间问题 有5个进程P1&#xff0c;P2&#xff0c;P3&#xff0c;P4&#xff0c;P5&#xff0c;它们同时依次进入就…

操作系统习题(有答案)

最近在学习os在网上找到的很好的资料&#xff0c;希望对大家有用~ 第1章 一、填空 1&#xff0e;计算机由 硬件 系统和 软件 系统两个部分组成&#xff0c;它们构成了一个完整的计算机系统。 2&#xff0e;按功能划分&#xff0c;软件可分为 系统 软件和 应用 软件两种。 3&am…

【《操作系统慕课版》合集】期末复习 + 核心算法整理 + 课后答案

所有章节归类好了概念、算法&#xff0c;同时课后的简答题也一并给出了答案。祝各位复习愉快~ 整理不易希望能点个赞~ 目录 第一章 操作系统概述 第二章 进程的描述与控制 第三章 处理机调度与死锁 第四章 进程同步 第五章 存储器管理 第六章 虚拟存储器 第七章 输入输…

计算机操作系统习题

作业一 操作系统的主要功能有&#xff08; &#xff09;。 &#xff08;3.0分&#xff09; A、进程管理、存储器管理、设备管理、处理机管理 B、虚拟存储管理、处理机管理、进程管理、文件管理 C、处理机管理、存储器管理、设备管理、文件管理 D、进程管理、中断管理、设备管理…

【第一章 | 操作系统概述】《操作系统 慕课版》课后答案 + 复习

目录 | 本章概念 | 本章算法 单道批与多道批的图像绘制 利用率的计算与分析 | 课后简答题 | 本章概念 1.OS的作用 作为用户与计算机硬件系统之间的接口 | 计算机系统资源的管理者 | 对计算机资源的抽象。OS的目标是&#xff1a;方便性 有效性 可扩充性 开放性 2.虚拟机…

操作系统原理及应用复习(第2版)大部分课后习题

操作系统原理及应用复习 第一章操作系统概论 1.1 什么是操作系统,有哪些基本功能和特点&#xff1f; 操作系统是覆盖在裸机上的第一层软件,他直接控制,管理各种资源。基本功能&#xff1a; 提供人机接口 命令级接口程序级接口图形界面 管理计算机资源 处理机管理存储管理设备…

TCP头部和封装

TCP在IP数据报中的封装 IP头部 TCP头部 可看到&#xff0c;IP数据报即 P头部协议 TCP报文段&#xff0c;这也称为TCP在IP数据报中的封装。有趣的是&#xff0c;TCP报文段中的数据部分并不是必须的&#xff0c;当一个连接被建立和终止时&#xff0c;交换的报文段只包含了TCP头…

3.2.3 使用tcpdump观察TCP头部信息(补充TCP协议的常用知识)

使用tcpdump观察TCP头部信息和三次握手四次挥手 前言实验开始1. 延迟确认2. 序号&#xff08;seq&#xff09;和确认号&#xff08;ack&#xff09;之间的关系3.TS val和ecr的关系4. TCP状态转移&#xff08;书上p41-p42原话&#xff09;5. FIN_WAIT_2状态(半关闭状态)6. TIME_…

从wireshark抓包看TCP头部时间戳

本文于2020年8月23日首发于个人公众号“码农的修炼之道”&#xff0c;欢迎关注。 不知道大家有没有注意到&#xff0c;wireshark抓取tcp报文的时候&#xff0c;大部分时候的报文是如下图所示的&#xff0c;其中带了Seq&#xff0c;Win和Len字段&#xff0c;分别对应了报文序列号…

TCP、UDP、IP头部结构

数据传输在TCP/IP网络模型中&#xff0c;经过一层便会添加一层头部&#xff0c;其中TCP(网络传输协议)&#xff0c;UDP处于传输层&#xff0c;IP(网间协议)处于网络层。 数据进入协议栈的封装过程 TCP/IP协议族 TCP 传输控制协议 应用程序之间通信 建立的全双工通信UDP 用户数…