js批量下载文件,跨域文件修改名称下载

1.window.open下载

window.open(url)
//或者
window.location.href = url

2.iframe标签下载

 const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
      document.body.appendChild(iframe);
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 200);

3.a标签下载

1.单个下载        

 download(file) {
      let aLink = document.createElement('a'); // 创建a标签
      aLink.href = file.url+ '?response-content-type=application/octet-stream';//加后缀任何链接都会下载,而不是预览
      aLink.download = file.name;
      // console.log(aLink.download)
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
 },

2.多个下载

 DownLoadData() {
      for (let i in this.fileList) {
        setTimeout(() => {
          this.download(this.fileList[i]);
        }, i * 500);
      }
 },
 download(file) {
      let aLink = document.createElement('a'); // 创建a标签
      aLink.href = file.url+ '?response-content-type=application/octet-stream';
      aLink.download = file.name;
      // console.log(aLink.download)
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
 },

4.下载并改名字

正常来说更改download属性就可以更改名字,但是当下载链接跨域时就download就不会生效,因为浏览器无法获取到文件,不能对他进行更改

所以我们使用get请求获取到blob文件,转换为本地的链接然后下载,就可以复制download属性下载

 download(file) {
      //下载
      var x = new XMLHttpRequest();
      x.open('GET', file.url, true);
      x.responseType = 'blob';
      x.onload = function(e) {
        var url = window.URL.createObjectURL(x.response);
        const link = document.createElement('a');
        link.target = '_blank';
        link.href = url;
        link.download = file.name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };
      x.send();
  },

5.下载txt文件乱码解决

  download(file) {
    const req = new XMLHttpRequest();
        req.open('get', file.url, true);
        req.responseType = 'blob';
        req.setRequestHeader('Content-Type', 'application/json');
        req.onload = function() {
          // 这里因为没有对返回的数据处理编码格式,所以在预览txt时需要转换成utf-8
          const data = new Blob([req.response], { type: 'application/json;charset=utf-8' });
          let blobUrl = window.URL.createObjectURL(data);
          window.open(blobUrl);
        };
        req.send();
    },

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue.js下载文件时,如果涉及到跨域问题,可以进行以下处理: 首先,在服务器端配置允许跨域请求的响应头。具体来说,需要在服务器端的响应中添加如下的头信息: ``` Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token ``` 接着,可以通过使用axios库发送GET请求来实现文件下载。在发送下载请求时,需要在请求头中设置`responseType`为`blob`,该选项指定响应的数据类型为二进制数据。具体代码如下: ```javascript import axios from 'axios'; export function downloadFile() { axios({ method: 'GET', url: '下载文件的地址', responseType: 'blob' }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', '文件名'); document.body.appendChild(link); link.click(); }) .catch(error => { console.error('下载文件出错:', error); }); } ``` 在该代码中,通过axios发送GET请求并设置`responseType`为`blob`,将服务端返回的文件数据转换成二进制数据。然后创建一个`<a>`元素,将Blob数据作为URL创建链接,并设置`download`属性为要下载文件名。最后将链接添加到文档中,并触发点击链接的操作以下载文件。 需要注意的是,在Vue.js中需要安装axios库,可以使用以下命令进行安装: ``` npm install axios --save ``` 以上就是在Vue.js下载文件跨域解决方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值