关于 js循环批量下载文件,使用window.location.href下载,并不能全部下载

关于如题

场景需要下载软件的时候,将关联的附件按顺序下载下来。刚开始全部用
window.location.href = “api/downloadSoftware?id=” + id;
直接url的方式只能下载最后一个文件。其他的文件全部没有下载下来。
搜索了一下先发现一个方案:

 var divFrame = window.parent.document.getElementById(docId)
                      //判断是否存在,如果存在先移除,再重新创建
                      if (divFrame != null) {
                          window.parent.document.body.removeChild(divFrame)
                      }
                      //重新创建
                      var iframe = window.parent.document.createElement("iframe");
                      iframe.setAttribute("id", docId);
                      window.parent.document.body.appendChild(iframe);
                      divFrame = window.parent.document.getElementById(docId);
                      divFrame.src = "api/downloadDoc?id=" + docId;
                      divFrame.style.display = "none";
for (var j = 0; j < arr.length; j++) {
                var docId=arr[j];
                //在dom树上创建一个a标签
                var a = document.createElement('a');
                var url = "api/downloadDoc?id=" + docId
                //将url赋值给a标签的href属性
                a.href = url;
                //设置设置下载文件的名称 (这里如果你接口里面输出设置了文件名称,这里设置文件名称将不生效,不设置可能又会触发下载失败)
                a.download = docId+'.txt';
                a.click();//主动触发a标签点击事件
            }
            $scope.downloading = true;
            window.location.href = "api/downloadSoftware?id=" + id;
使用JavaScript通过`window.location.href`来下载文件,并且文件名包含中文时,可能会遇到乱码的问题。这主要是因为浏览器默认使用的是系统编码或者是UTF-8等通用编码来进行URL拼接,而某些本地系统的默认字符集(如GBK、GB2312等支持中文的编码)与网页显示使用的编码可能存在差异。 ### 解决方案: 为了防止中文名称乱码,可以采用以下几种方法之一: #### 方案一:使用 Blob 和 URL.createObjectURL API 这种方式将文件数据转换成Blob对象,并利用`URL.createObjectURL()`创建一个临时URL,进而生成可直接点击的链接来下载文件。 ```javascript function downloadFile(filename, content) { const url = URL.createObjectURL(new Blob([content], { type: 'application/octet-stream' })); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = filename; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 0); } // 使用示例 downloadFile('测试文件.xlsx', '您的文件内容...'); ``` #### 方案二:指定合适的Content-Disposition 修改HTTP头信息,指定文件下载时不显示文件名提示,而是由用户自行选择保存位置和命名。这是通过在响应头添加特定的值来实现的。 ```javascript fetch('路径到您的文件') .then(response => response.blob()) .then(blob => { let link = document.createElement("a"); link.href = window.URL.createObjectURL(blob); link.setAttribute("download", "测试文件.xlsx"); // 指定文件名及扩展名 link.style.display = "none"; document.body.appendChild(link); link.click(); // 触发下载事件 window.URL.revokeObjectURL(link.href); // 释放内存引用 document.body.removeChild(link); }); ``` ### 相关问题: 1. **如何避免在其他浏览器环境下使用此方法?** 针对不同的浏览器环境调整编码设置或使用兼容性更高的方法。 2. **为什么某些编码会导致乱码现象?** 主要是由于文件名的编码与浏览器解析编码之间的不一致导致,涉及到字符集的相互翻译过程。 3. **除了上述方法外还有哪些解决中文文件名乱码的策略?** 可以尝试使用Base64编码文件数据,然后通过HTML `<a>` 标签的 `href` 属性创建下载链接,再结合JavaScript动态插入下载触发脚本来实现文件下载。这种方法也能够有效处理文件名中的中文字符。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值