纯前端模板文件下载如何精确控制下载的文件名字

news2024/11/25 12:45:54

在写项目的时候,遇到了一个需要把给定的文件放到页面中,然后用户点击下载按钮将这个文件下载下来,我将其存入了云服务之中(这个云服务是不会清空的,内存又不值几个钱),但是当我下载的时候,下载的文件名是存到服务器地址的路径名,出现了这个问题。 然后我用a标签的dowmLoad属性指定文件下载名字,依然没有效果。

从网上一搜,原来是服务器发送的请求头里控制了这个属性,让浏览器觉得自己设置的没有服务器给的靠谱。

 方法!!!!

这个时候,我们可以通过Blob对象和URL.createObjectURL()来实现,就是先将他搞过来成为前端的数据,然后前端用这个数据生成一个文件,最后给他赋予我们想给他的名字,就成功的实现了。

const download = () => {
	const fileUrl = "https://***************************************/1700023798306.docx";
	const fileName = "测试名字.docx";

	fetch(fileUrl)
		.then(response => response.blob())
		.then(blob => {
			// 创建一个虚拟的下载链接
			const link = document.createElement("a");
			link.href = URL.createObjectURL(blob);

			// 设置下载属性,并指定文件名
			link.download = fileName;

			// 将链接添加到文档中,并触发点击事件
			document.body.appendChild(link);
			link.click();

			// 移除链接
			document.body.removeChild(link);
		});
};

 

划重点

这个方法有点新!!可能旧版本的浏览器兼容性没有那么好。

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

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

相关文章

Java读取本地文件

import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io.IOException;public class Main {public static void main(String[] args) {String filePath "C:/Users/admin/Desktop/知识点记录.md";// 创建一个文件对象File f…

【MySQL8】1130 - Host *** is not allowed to connect to this MySOL server

问题描述 使用 Navicat 连接 MySQL8 报错: 1130 - Host *** is not allowed to connect to this MySOL server解决方案 use mysql;select host ,user from user; -- 将 root 用户的主机(host)值修改为 %,即允许从任何主机连接 …

navigator.geolocation.getCurrentPosition在谷歌浏览器不执行的问题

/*** 获取我的位置*/getNavigatorLocation: function () {navigator.geolocation.getCurrentPosition(function (success) {console.log(inner>>>, success);if (success && success.coords) {var data success.coords;var point "POINT(" data.…

Web前后端漏洞分析与防御

第1章 课程介绍 试看2 节 | 15分钟 介绍安全问题在web开发中的重要性,并对课程整体进行介绍 收起列表 视频: 1-1 Web安全课程介绍 (09:24) 试看 视频: 1-2 项目总览 (04:47) 第2章 环境搭建2 节 | 26分钟 本章节我们会搭建项目所需要的环境 …

两种常用的找到现货白银目标位的方法

在现货白银交易中,会买的不算厉害,会卖的人才能让利润真正的落袋为安。这里的“买”和“卖”指的不是买入和卖出,而是开仓和平仓。今天我们就来讨论一下,我们怎么样才能懂得“卖”,应该在哪里设置“卖”,也…

freeRTOS--软件定时器

一、什么是定时器: 简单可以理解为闹钟,到达指定一段时间后,就会响铃。STM32 芯片自带硬件定时器,精度较高、达到定时时间后会触发中断,也可以生成 PWM 、输入捕获、输出比较,等等,功能强大&am…

STM32GPIO——上拉下拉电阻、施密特触发器、P-MOS/N-MOS管

图1和图2 两种版本的GPIO基本结构图 如上两个图所示,标号2都为上拉、下拉电阻部分,阻值约为30k~50k欧,通过对应开关进行控制,开关由寄存器控制。 当引脚外部的器件没有干扰引脚的电压时,即没有外部的上、下拉电压&a…

springboot 2.1.0.RELEASE 项目加入swagger接口文档

Release v2.1.0.RELEASE spring-projects/spring-boot GitHub springboot 2.1.0.RELEASE发行日期是2018年10月30日(Oct 30, 2018) 不要使用过高的swagger版本,如SpringFox Boot Starter 3.0.0,否则报错: spring-…

Java学习之路 —— 多线程

文章目录 1. 线程创建方式1.1 继承Thread1.2 声明一个实现Runnable接口的类1.3 利用Callable接口、FutureTask类来实现 2. 线程同步2.1 同步代码块2.2 同步方法2.3 Lock锁 3. 线程同步4. 线程池 1. 线程创建方式 1.1 继承Thread 定义子类,继承Thread,创…

Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器

前言 持续学习总结输出中,Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器 一、指令修饰符 1.什么是指令修饰符? 所谓指令修饰符就是通过“.”指明一些指令后缀 ,不同的后缀封装了不同的处理操作 —> 简化代码 2.按键…

玩具、儿童用品、儿童服装上亚马逊TEMU平台CPC认证办理

CPC认证是Childrens Product Certificate的简称,即儿童产品证书。它是美国强制性法规CPSIA要求的一部分,该法规主要针对12岁及以下儿童使用的产品,如玩具、儿童用品、儿童服装等。 一、儿童小汽车CPC测试项目可能会因产品标准和法规的不同而…

开关电源测试之输出暂态响应测试标准及方法详解

暂态响应是指在接收到输入信号后,输出信号在短时间内产生的变化。开关电源输出暂态响应测试是为了检测输出负载快速变化时,输出电压跟随变动的稳定性。 开关电源输出暂态响应怎么测试? 测试目的:测试S.M.P.S.输出负载快速变化时&a…

中小型企业内网搭建

某中小型公司客户提出网络比较单一整体都在一个大的广播域中,AP无线的SSID有很多个,包括一些小的无线路由器散发出来的信号,用起来网络不太稳定,并且AP的SSID要分开,办公室只有单个SSID,不允许出现其他的&a…

【Ubuntu】设置永不息屏与安装 dconf-editor

方式一、GUI界面进行设置 No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 20.04.6 LTS Release: 20.04 Codename: focal打开 Ubuntu 桌面环境的设置菜单。你可以通过点击屏幕右上角的系统菜单,然后选择设置。在设置菜单中,…

休闲机动滑板车和便携式自行车ASTMF2641-23测试标准如何办理?

领先的行业资讯 近日,美国材料实验协会ASTM发布了2023版“休闲机动滑板车和便携式自行车的消费者安全规范” ASTM F2641-23,取代上一版本ASTM F2641-08 (2015)。 该规范是基于目前最先进的娱乐电动滑板车和迷你摩托车技术水平,旨在涵盖产品的…

Win10专业版如何重装-Win10专业版重装系统教程

Win10专业版如何重装?Win10专业版系统能够用户带来丰富的功能服务,用户操作需求轻松得到满足。如果我们在Win10专业版电脑中,遇到了系统问题,这时候可以考虑重新安装Win10专业版系统,从而解决系统出现的问题。下面小编…

全球温度数据下载

1.全球年平均温度下载https://www.ncei.noaa.gov/data/global-summary-of-the-year/archive/ 2.全球月平均气温下载https://www.ncei.noaa.gov/data/global-summary-of-the-month/archive/ 3.全球日平均气温下载https://www.ncei.noaa.gov/data/global-summary-of-the-day/ar…

Bard似乎在胡扯的路上飞速狂奔?

Bard似乎在胡扯的路上飞速狂奔?连最简单的问题都以胡扯来回答?

全网火爆,接口自动化测试框架-fixture函数使用,一篇打通...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 setup和teardown能…

医疗项目的需求分析以及开发流程

一.项目的背景以及需求 1.项目背景 1.政策层面来看,近年来我国政府相关部门陆续颁发了支持数字医疗行业发展的相关政策,“互联网医疗”政策逐渐明确完善,为数字医疗行业发展提供支持,行业迎来政策福利期。 其次,从经济…