js通过window.open(url)下载文件并修改文件名

 更新时间:2023年08月14日 10:51:52   作者:大大。  
这篇文章主要给大家介绍了关于js如何通过window.open(url)下载文件并修改文件名的相关资料,我们知道下载文件是一个非常常见的需求,文中通过代码介绍的非常详细,需要的朋友可以参考下

通过window.open(url)下载文件(xlsx、xls、zip等格式文件),如果前端想要自定义更改下载时的文件名,可以使用以下方法

// 下载文件,自定义文件名称
export function downFile(url, fileName) {
  const x = new XMLHttpRequest()
  x.open('GET', url, true)
  x.responseType = 'blob'
  x.onload = function() {
    const url = window.URL.createObjectURL(x.response)
    const a = document.createElement('a')
    a.href = url
    a.download = fileName
    a.click()
  }
  x.send()
}

在页面调用

downFile('url', '自定义文件名')

附:window.open打开窗口被拦截的快速解决方法

自己遇到的使用window.open打开新窗口被拦截的几种情况(使用的chrome浏览器,其他浏览器未测):

第一次:window.open(www.gimoo.net),打开了新窗口,但是页面并没有加载出来,需要回车才能出来

解决方法:页面地址需要加上协议名称http://或者https://

第二次:在ajax异步请求成功的回调函数中使用window.open方法,虽然加上了协议名称,但是,却并没有打开新窗口,在地址栏直接显示 被拦截 的字样

解决方法:有两种:

1、将ajax异步请求改为同步请求

2、使用 var newWindow = window.open("_blank");newWindow .location = "url地址";

总结 

到此这篇关于js通过window.open(url)下载文件并修改文件名的文章就介绍到这了,更多相关js window.open(url)下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS原形与原型链深入详解

    JS原形与原型链深入详解

    这篇文章主要介绍了JS原形与原型链,结合实例形式深入分析了JS原型链、继承、组合继承等相关原理、操作技巧及注意事项,需要的朋友可以参考下
    2020-05-05
  • 你不知道的Git log还有这种用法

    你不知道的Git log还有这种用法

    这篇文章主要为大家介绍了你不知道的Git log竟然还有这种用法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • javascript面向对象程序设计实践常用知识点总结

    javascript面向对象程序设计实践常用知识点总结

    这篇文章主要介绍了javascript面向对象程序设计实践常用知识点,结合实例形式总结分析了javascript面向对象程序设计中原型引用类型、属性、方法相关操作技巧与注意事项,需要的朋友可以参考下
    2019-07-07
  • javascript将扁平的数据转为树形结构的高效率算法

    javascript将扁平的数据转为树形结构的高效率算法

    这篇文章主要介绍了javascript将扁平的数据转为树形结构的高效率算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript 防盗链的原理以及破解方法

    JavaScript 防盗链的原理以及破解方法

    这篇文章主要介绍了JavaScript 防盗链的原理以及破解方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-12-12
  • 基于JavaScript+IntersectionObserver实现高性能图片懒加载

    基于JavaScript+IntersectionObserver实现高性能图片懒加载

    在 Web 开发中,图片懒加载是一种常见的优化手段,尤其在长列表页面中,按需加载图片可以显著提升页面性能,本篇文章将通过 JavaScript 和 Intersection Observer,实现一个带有卡片样式的高性能图片懒加载示例,需要的朋友可以参考下
    2025-01-01
  • javascript实现控制的多级下拉菜单

    javascript实现控制的多级下拉菜单

    这篇文章主要介绍了javascript实现控制的多级下拉菜单,包含示例代码,效果非常不错,这里推荐给大家。
    2015-07-07
  • layer弹出层父子页面事件相互调用方法

    layer弹出层父子页面事件相互调用方法

    今天小编就为大家分享一篇layer弹出层父子页面事件相互调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • uniapp js修改数组某个下标以外的所有值完整代码

    uniapp js修改数组某个下标以外的所有值完整代码

    在UniApp开发中,经常需要对数组进行操作,若要修改数组中特定下标外的所有元素,可通过map方法或for循环实现,map方法适用于生成新数组,for循环则直接修改原数组,根据项目需求选择最佳方案,需要的朋友可以参考下
    2024-09-09
  • JS实现点击网页判断是否安装app并打开否则跳转app store

    JS实现点击网页判断是否安装app并打开否则跳转app store

    这篇文章主要介绍了JS实现点击网页判断是否安装app并打开否则跳转app store的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11

最新评论