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

在写项目的时候,遇到了一个需要把给定的文件放到页面中,然后用户点击下载按钮将这个文件下载下来,我将其存入了云服务之中(这个云服务是不会清空的,内存又不值几个钱),但是当我下载的时候,下载的文件名是存到服务器地址的路径名,出现了这个问题。 然后我用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.hqwc.cn/news/189447.html

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

相关文章

2023_“数维杯”问题B:棉秸秆热解的催化反应-详细解析含代码

题目翻译: 随着全球对可再生能源需求的不断增加,生物质能作为一种成熟的可再生能源得到了广泛的关注。棉花秸秆作为一种农业废弃物,因其丰富的纤维素、木质素等生物质成分而被视为重要的生物质资源。虽然棉花秸秆的热解可以产生各种形式的可…

SpringCloud -Token传递之Feign

目录 方法一 RequestHeader 方法二 使用Feign的Interceptor 步骤一 实现RequestInterceptor接口 步骤二:配置Feign 通常微服务对于用户认证信息解析有两种方案 在 gateway 就解析用户的 token 然后路由的时候把 userId 等相关信息添加到 header 中传递下去。在…

Elasticsearch基础条件查询

条件查询 query:查询 match:匹配 match_all:匹配所有 #第一种 GET /shopping/_search?q名字:张三#第二种 GET /shopping/_search {"query": {"match": {"名字": "张三"}} }#全量查询 match_all G…

Looker Studio | 带来强大的探索、更新鲜的数据和更快的过滤

【信息来源 Google Cloud。Cloud Ace 是 Google Cloud 全球战略合作伙伴。】 Looker Studio 支持对临时数据进行自助分析,并与 Looker 一起为每月访问 Looker 系列产品的超过 1000 万用户做出贡献。今天,谷歌云为分析师推出新方法,为业务用户…

Java进阶笔记(面向对象后, 持续更新)

常用API 游戏打包成exe 考虑的因素 要有图形化界面代码要打包起来游戏用到的图片也要打包JDK也要打包 核心步骤 把所有代码打包成一个压缩包, jar后缀的压缩包把jar包转换成exe安装包把第二部的exe, 图片, JDK整合在一起, 变成最终的exe安装包 1. Math 是一个帮助我们用…

机器学习第8天:线性SVM分类

文章目录 介绍 特征缩放 示例代码 硬间隔与软间隔分类 主要代码 代码解释 结语 介绍 作用:判别种类 原理:找出一个决策边界,判断数据所处区域来识别种类 简单介绍一下SVM分类的思想,我们看下面这张图,两种分类都…

基于R语言平台Biomod2模型的物种分布建模与可视化分析

!](https://img-blog.csdnimg.cn/84e1cc8c7f9b4b6ab60903ffa17d82f0.jpeg#pic_center)

接口测试 —— 接口测试的意义

1、接口测试的意义(优势) (1)更早的发现问题: 不少的测试资料中强调,测试应该更早的介入到项目开发中,因为越早的发现bug,修复的成本越低。 然而功能测试必须要等到系统提供可测试…

前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】

目录 一. 图片1.2. 二.list.vue三.uni-load-more.vue最后 一. 图片 1. 2. 二.list.vue <template><view><!--列表--><scroll-view scroll-y"true" class"scroll-Y" :style"height: scrollviewHigh px;" lower-threshol…

股票价格预测 | Python实现基于CNN卷积神经网络的股票预测模型(keras,Conv1D)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 股票价格预测 | Python实现基于CNN卷积神经网络的股票预测模型(keras) 源码设计 import quandl import datetimedf = quandl

Jenkins自动化部署一个Maven项目

Jenkins自动化部署 提示&#xff1a;本教程基于CentOS Linux 7系统下进行 Jenkins的安装 1. 下载安装jdk11 官网下载地址&#xff1a;https://www.oracle.com/cn/java/technologies/javase/jdk11-archive-downloads.html 本文档教程选择的是jdk-11.0.20_linux-x64_bin.tar.g…

如何优化谷歌商店里应用的评分评论2

在做应用评分优化前&#xff0c;我们需要考虑用户以及他们如何在不浪费太多时间的情况下分享反馈。 1、及时妥善的回复评论。 许多潜在用户在决定下载应用之前都会查看评论。回复正面和负面评论&#xff0c;向用户表明我们重视他们的反馈。回复用户评论是一个改善应用公众形象…