JavaScript 下载文件并保持原文件名称

JavaScript 下载文件并保持原文件名称<script>//获取文件名functionfileNameFromHeader(disposition){varresult=null;if(disposition&&/filename=.*/ig.test(disposition)){result=dispos…

大家好,又见面了,我是你们的朋友全栈君。

<script>
 // 获取文件名
    function fileNameFromHeader (disposition) {
        var result = null;
        if (disposition && /filename=.*/ig.test(disposition)) {
            result = disposition.match(/filename=.*/ig);
            return decodeURI(result[0].split('=')[1]);
        }
        return null;
        }
function downloads() {
   var url = '/down_excel';
   var xhr = new XMLHttpRequest();

   xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口

   xhr.responseType = "blob";    // 返回类型blob

   // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑

   xhr.onload = function () {

       // 请求完成

       if (this.status === 200) {

           // 返回200

           var blob = this.response
           var filenames = fileNameFromHeader(xhr.getResponseHeader('Content-Disposition'));
           var reader = new FileReader();

           reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href

           reader.onload = function (e) {

               // 转换完成,创建一个a标签用于下载

               var a = document.createElement('a');

               a.download = filenames.slice(1,filenames.length-1); //'data.xlsx';

               a.href = e.target.result;

               $("body").append(a);    // 修复firefox中无法触发click

               a.click();

               $(a).remove();

           }

       }

   };

   // 发送ajax请求

   xhr.send()

}
</script>

注:此代码只是个人根据当时的环境满足了当时的需求,记录下来用做后续参考!如有问题,请检查软硬件环境是否一致,由于时间精力有限,大部分未做详细环境描述。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134693.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Laravel的三种安装方法总结

    Laravel的三种安装方法总结

    2021年10月21日
  • vue文件上传功能_vue如何自定义组件

    vue文件上传功能_vue如何自定义组件vue的文件上传组件upload,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发上传方法,而不是选择了文件就上传,所以结合我项目实例,写一vue自定义文件上传的实现,包括前端和后台的处理以及参数的接收。一、先认识一下vue的upload组件,官网链接ht…

    2022年8月15日
  • Kafka学习之一 Kafka是什么,主要应用在什么场景?

    Kafka学习之一 Kafka是什么,主要应用在什么场景?Kafka是什么,主要应用在什么场景,能为我们解决什么问题

    2022年10月13日
  • pve 删除虚拟机「建议收藏」

    qmdestroy100#之后以一下查看虚拟机qmlist100常用命令:qmguestcmd<vmid><command>qmguestexec-status<vmid><pid>qmguestpasswd<vmid><username>[OPTIONS]qmguestexec<vmid>[<extra-args>][OP.

    2022年4月17日
  • java分割字符串的方法_java字符串按照特定字符分割

    java分割字符串的方法_java字符串按照特定字符分割最近在项目中遇到一个小问题,一个字符串分割成一个数组,类似Stringstr=”aaa,bbb,ccc”;然后以”,”为分割符,将其分割成一个数组,用什么方法去实现呢?第一种方法:可能一下子就会想到使用split()方法,用split()方法实现是最方便的,但是它的效率比较低第二种方法:使用效率较高的StringTokenizer类分割字符串,StringTokenizer类是

    2022年9月29日
  • 视频传输协议(常用的视频协议)

    SDP协议RTPRTCPSRTPRTP只负责传输数据包,需要与RTCP配合使用,由RTCP来保证RTP数据包的服务质量。每一个RTP数据报都由头部(Header)和负载(Payload)两个部分组成,其中头部前12个字节的含义是固定的,而负载则可以是音频或者视频数据。整个IP报文由IP报头、UDP报头、RTP报头、RTPPayload(音频或视频数据)组成, IP协议最大传输单元(MTU)最大为1500字节,其中包括至少20字节的IP头、8字节的UDP头、12字节的RTP头, 这样,头信息

    2022年4月17日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号