设置 a 标签的 download属性,可以重置 文件名。如下代码,文件名重置为 file.xlsx。

<a href='http://192.168.1.1/abcd.xlsx' download='file.xlsx'>下载</a>

这种写法有个前提:href 的下载地址 和 当前网站地址 必须是 同源的,否则download不生效。 

如果不同源,还有一种方法,代码如下:

// 封装一个download方法

const download = () => {
const x = new window.XMLHttpRequest();
x.open('GET', 'http://192.168.1.1/abcd.xlsx', true);
x.responseType = 'blob';
x.onload = () => {
const url = window.URL.createObjectURL(x.response);
const a = document.createElement('a');
a.href = url;
a.download = 'file.xlsx';
a.click();
};
x.send();
} 点击下载的时候,调用以上的 download 方法即可。
————————————————
版权声明:本文为CSDN博主「任磊abc」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_36728518/article/details/123525637

a标签设置下载设置文件名,并且设置无效的解决方法的更多相关文章

  1. win7 下设置时间格式为yyyy-MM-dd 格式无效的解决方法

    部分win7 64位机器,在时间区域部分设置了时间格式为:yyyy-MM-dd后程序和数据库里面还是原来默认的yyyy/MM/dd格式 打开注册表,搜索 yyyy/MM/dd ,修改为yyyy-MM- ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法

    OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法 在OSS控制台设置了CORS规则以后,通过JS程序去调用的时候报No 'Access-Cont ...

  4. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

  5. CSS设置浮动导致背景颜色设置无效的解决方法

    float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...

  6. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...

  7. 当Thread.Sleep的暂停时间参数设置过小时,精度很差的解决方法

    一.问题产生 在C#和C++中有这样一个函数:void Sleep(int Timeout),可以让线程暂停指定的毫秒数. 但是我在win8下调用这个函数实现按照固定频率发送udp数据包时,会有一个问 ...

  8. oracle安装报错[INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置)解决方法!

    最近在电脑上安装oracle12c,安装时,在执行检查环境步骤时候报错: [INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置) 最后在网上搜索解决方法,特记录下,以防以后再用到 ...

  9. Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法

    Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧,有时候我们用某个账户登录后,发现导航栏无法显示在左侧,操作十分不方便.我们可以去数据库删除当前登录用户的自定义布局 解决方法如下 ...

  10. 【转】【Python】python使用urlopen/urlretrieve下载文件时出现403 forbidden的解决方法

    第一:urlopen出现403 #!/usr/bin/env python # -*- coding: utf- -*- import urllib url = "http://www.go ...

随机推荐

  1. xshell和xftp下载免费版本方法

    下载地址 https://www.xshell.com/zh/free-for-home-school/ 填写邮箱和用户名,会发送下载邮件到邮箱,然后根据邮箱中的下载地址来下载安装.

  2. 日志切面接口和方法demo,切面内重新抛出异常

    1. 定义切面 @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interface Log { Stri ...

  3. Apollo config配置中心 配置列表和map DEMO

    Apollo config配置中心 配置列表和map DEMO#支持可扩展 Apollo配置 apollo中配置如下: defaultId = 100,200 chooseId = {"30 ...

  4. k8s中的亲和性、污点与容忍(调度到不同的宿主机)

    本文章并未经过严格实践,如有错误,辛苦指出. 背景 服务需要多副本,来保证高可靠.多活. 那么问题来了,假如这些副本都在同一个宿主机上,或者同一个交换机下-宿主机.交换机其中一项坏掉了,那多副本还有什 ...

  5. git 有用配置汇总

    背景 git config的不同级别,每一个级别覆盖上一级别的配置,所以.git/config的配置变量会覆盖/etc/gitconfig中的配置变量 git config --system #为整个 ...

  6. IEC61850方案分享,基于全志、瑞芯微国产平台实现!

    什么是IEC61850协议? IEC61850是一种用于在电力自动化系统中进行数据交换和控制的通信协议.它定义了一种标准化的通信和数据模型,以支持设备和系统之间的数据交换和互操作性. IEC61850 ...

  7. Vue2 整理(一):基础篇

    前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一些东西而已,所 ...

  8. SpringBoot集成ShardingSphere分表中间件

    ShardingSphere简介 ShardingSphere 由 JDBC.Proxy 和 Sidecar(规划中)这 3 款既能够独立部署,又支持混合部署配合使用的产品组成. 它们均提供标准化的基 ...

  9. Node.js 处理 File

    Node.js 处理 File fs 模块 常规使用 运用递归遍历目录树 创建文件和目录 读写文件 path 模块 对于 file 的理解,此处 fs 模块 Node.js 提供了处理文件系统的内置模 ...

  10. MiniAuth 一个轻量 ASP.NET Core Identity Web 后台管理中间插件

    MiniAuth 一个轻量 ASP.NET Core Identity Web 后台管理中间插件 「一行代码」为「新.旧项目」 添加 Identity 系统跟用户.权限管理网页后台系统 开箱即用,避免 ...